在vue3使用Pinia

今年到今天已經過了一大半了，又有新的技術需要學習了。這次由於vue3的到來vuex也被官方deprecated , 隨之取代的則是Pina。

本篇紀錄學習Pina的相關筆記！

定義 一個 store

為什麼是一個呢？這是因為在pinia中可以將store模塊化, 所以可以有多個store，而每個store都是獨立的

安裝完pinia後新建一個stores的資料夾,然後在底下新增index.js

這裡要注意的是main作為第一個參數表達的是id的意思，只能是唯一，不可重複的。

從下面的代碼中可以看到結構和vuex是相似的，最大的區別則是少了mutation.

// store/indxe.js
import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main',{
  state:()=>{
    return {}
  },
  getters:{},
  actions:{}
})

在vue3中使用store

這裡看的是當你想要使用哪一個store則引用哪一個store

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // 可返回整個實例，並在模板中使用它
      store,
    }
  },
}

注意事項

這裡請注意，因為store是用reactive包裹成的對象，當使用解構時其資料將會失去響應式的作用
 

export default defineComponent({
  setup() {
    const store = useStore()
    // ❌ 這不起作用，因為它會破壞響應式
    // 這和從 props 解構是一樣的
    const { name, doubleCount } = store

    name // "eduardo"
    doubleCount // 2

    return {
      // 一直會是 "eduardo"
      name,
      // 一直會是 2
      doubleCount,
      // 這將是響應式的
      doubleValue: computed(() => store.doubleCount),
      }
  },
})

如果一定要使用解構，且只是讀取而不進行操作的時候可以使用pinia內建的storeToRefs來對任何响应式属性创建 refs

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` 和 `doubleCount` 是響應式引用
    // 這也會為插件添加的屬性創建引用
    // 但跳過任何 action 或 非響應式（不是 ref/reactive）的屬性
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})

改變數據

接下來可以讀取以後，要做的就是最數據進行修改，與vuex的不同是，vuex修改state時必須透過mutation來進行修改, 而pinia則是可直接對state進行修改, 方便且直觀許多

// store/indxe.js
import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main',{
  state:()=>{
    return {
       counter: 0
    }
  },
  getters:{},
  actions:{}
})


// test.vue
import { useStore } from '@/stores/counter'

export default defineComponent({
  setup() {
    const store = useStore()
    const store = useStore()
    const onBtnClick = () => {
       store.counter++
    }

    return {
      onBtnClick
  },
})

重置狀態： $reset

如果想要回到最初值（在這裡的範例是 0）的話則可使用$reset()

const store = useStore()

store.$reset()

改變狀態： $patch

如果要改變多個數值的時候則可以使用$patch, 那麼這裡跟剛剛提到的直接對state修改看起來結果是一致的，那麼為什麼要使用$patch呢？

$patch 是經過優化的，會加快修改速度，對程序的性能有很大的好處。所以如果是多條條數據同時更新狀態數據，推薦使用$patch方式更新。

const handleClickPatch = () => {
  store.$patch({
    count: store.count + 2,
    text: '我被修改了',
  });
};

不過官方提醒： 

這種語法應用某些突變非常困難或代價高昂：任何集合修改（例如，從數組中推送、刪除、拼接元素）都需要您創建一個新集合。

因此$patch 方法也接受一個函數來批量修改集合內部分對象的情況：

cartStore.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

替換整個state

在pinia也允許替換整個state

store.$state = { counter: 666, name: 'Paimon' }

實施對state的監聽

以上不定時更新～