在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的監聽

<template>
  <div>
    {{ baseUrl }}
  </div>
  <div v-show="isShow">
    該我出現了
  </div>
  <button @click="changeData">
    通過actions改變數據
  </button>
</template>
 
<script>
import appStore from "@/store/app"
import {storeToRefs} from "pinia"
import {ref} from "vue"
 
export default {
  name: "PiniaSubscribe",
  setup() {
    const store = appStore()
    const {baseUrl} = storeToRefs(store)
    const afterChangeUrl = 'https://www.taobao.com/'
    let isShow = ref(false)
 
    const subscribe = store.$subscribe((mutation, state) => {
      /*
      * mutation主要包含三個屬性值：
      *   events：當前state改變的具體數據，包括改變前的值和改變後的值等等數據
      *   storeId：是當前store的id
      *   type：用於記錄這次數據變化是通過什麼途徑，主要有三個分別是
      *         “direct” ：通過 action 變化的
                ”patch object“ ：通過 $patch 傳遞對象的方式改變的
                “patch function” ：通過 $patch 傳遞函數的方式改變的
      *
      * */
      // 我們就可以在此處監聽store中值的變化，當變化為某個值的時候，去做一些業務操作之類的
      console.log(mutation)
      console.log(state.baseUrl)
      if (state.baseUrl === afterChangeUrl) isShow.value = true
      else isShow.value = false
    }, {detached: false})  //第二個參數options對象，是各種配置參數
    //detached:布爾值，默認是 false，正常情況下，當訂閱所在的組件被卸載時，訂閱將被停止刪除，
    // 如果設置detached值為 true 時，即使所在組件被卸載，訂閱依然在生效
    //參數還有immediate，deep，flush等等參數 和vue3 watch的參數是一樣的，多的就不介紹了，用到再看文檔吧
 
    // 停止訂閱
    // subscribe()  //調用上方聲明的變量值，示例（subscribe），即可以停止訂閱
 
    function changeData() {
      store.changeState(afterChangeUrl)
    }
 
    return {
      isShow,
      baseUrl,
      changeData
    }
  }
}
</script>

以上不定時更新～