[Pinia] 搭配Composition API

TL;DR

Pinia搭配Composition API使用。

參考資料

相關連結

• Pinia | Official

---

範例

我們複製一份 前一篇PiniaPractice.vue的程式碼

並且重新命名為PiniaPracticeComposition.vue，將newPage下的路由等等設定好：

PiniaPracticeComposition.vue

./src/views/PiniaPracticeComposition.vue

<template>
  {{ user.name }} / {{ user.getUserName }} / {{ user.wallet }}
  <br>
  <button type="button" class="btn btn-primary" @click="user.updateName">user.updateName按鈕</button>
  <hr>
  <h2>解構並透過storeToRefs雙向綁定</h2>
  {{ name }} / {{ getUserName }} / {{ wallet }}
  <button type="button" class="btn btn-primary" @click="updateName">解構updateName按鈕</button>
  <hr>
  <button type="button" class="btn btn-primary me-2" @click="updateByPatch">透過patch修改</button>
  <button type="button" class="btn btn-primary" @click="reset">Reset</button>
</template>

<script>
import userStore from '@/stores/user.js'
import { storeToRefs } from 'pinia';
export default {
  setup() {
    // Composition
    const user = userStore();
    // 因為需要雙向綁定，所以才需要使用storeToRefs
    const {name,getUserName,wallet} = storeToRefs(user)
    // 因為方法不需要雙向綁定，所以直接解構賦值即可
    const {updateName} = user;

    
    // 修改狀態方法
    // 方法一：直接操作狀態
    user.name='漂亮阿姨' 
    // 方法二：解構取出狀態下
    name.value='杰倫'

    // 方法三：$patch
    function updateByPatch(){
      user.$patch({
        // 可以指定要修改的項目有哪些，如果只有name就只會修改name
        name:'透過patch更新的Name',
        // 如果有name也有wallet則兩個都會修改
        // wallet: '1000'
      })
    }
    function reset(){
      // 恢復到Store初始狀態
      user.$reset();
    }

    return {
      user,
      name,
      getUserName,
      wallet,
      updateName,
      updateByPatch,
      reset
    }
  },
}

user.js

./src/stores/user.js

import { defineStore } from "pinia";

// defineStore有兩個參數。1.Store名稱;2.屬性參數
export default defineStore('User Store',{
  // 對應Data，這邊可以直接使用箭頭函式撰寫
  // 同()=>{return{name:'wei}}
  state:()=>({
    name:'wei',
    wallet:300
  }),
  // 對應Computed
  getters:{
    // 變數名稱state不是固定的，但是取state比較直觀。
    getUserName:(state)=>`我的名字是${state.name}`
  },
  // 對應Methods
  actions:{
    updateName(){
      this.name='weiwei'
    }
  }
})

index.js

./src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      ...
      {
        path: 'pinia',
        component: () => import('@/views/PiniaPractice.vue')
      },
      {
        path: 'piniaComposition',
        component: () => import('@/views/PiniaPracticeComposition.vue')
      },
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/views/NotFound.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  linkActiveClass: 'active',
  routes: routes,
  scrollBehavior(to, from, savedPosition) {
    ...
  }
})

export default router

storeToRefs

storeToRefs可以產生雙向綁定，因為方法不需要雙向綁定所以不用使用storeToRefs。

透過storeToRefs的資料會是物件形式，如果需要修改內容則需要透過 .value才可以將內容取出或修改。

console.log(name)