Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解

更新時(shí)間：2022年09月15日 16:47:31 作者：pany

這篇文章主要為大家介紹了Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

關(guān)于大菠蘿

如果你還不了解 Pinia，那你可以將它理解為 Vuex5（因?yàn)?Vuex 5 不會(huì)出了），是 Vue3 全家桶成員之一。

這里是它的英文官方文檔，中文文檔好像不是官方的，并且當(dāng)前翻譯的不全面（比如 Setup Stores 就沒(méi)有在中文文檔中出現(xiàn)），不是很推薦。

最常見(jiàn)的 Option Stores 語(yǔ)法

傳遞帶有 state、getters 和 actions 屬性的 Options 對(duì)象給 defineStore() 就可以定義一個(gè) Store：

export const useCounterStore = defineStore('counter', {
  state: () => ({ 
    count: 0
 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

這種語(yǔ)法與 Vuex 中定義 Store 的語(yǔ)法非常近似，但是少了 Mutation 字段。

不僅如此，這種寫(xiě)法也和 Vue2 的 Options API（選項(xiàng)式 API）結(jié)構(gòu)類(lèi)似：state 與 data 對(duì)應(yīng)、getters 與 computed 對(duì)應(yīng)、actions 與 methods 對(duì)應(yīng)。

這種寫(xiě)法的好處就是結(jié)構(gòu)非常清晰，容易上手，特別是對(duì)剛從 Vue2 和 Vuex 轉(zhuǎn)到 Pinia 的開(kāi)發(fā)者！

安利 Setup Stores 語(yǔ)法

但 Setup Stores 語(yǔ)法更靈活、更函數(shù)：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

在這種語(yǔ)法中，ref 與 state 對(duì)應(yīng)、computed 與 getters 對(duì)應(yīng)、function 與 actions 對(duì)應(yīng)。

想必寫(xiě)過(guò) Vue3 朋友就能一眼看出來(lái)這和 Vue3 新推出的 Composition API（組合式 API）非常類(lèi)似！這樣的話，在使用 Vue3 和 Pinia 的時(shí)候，就能統(tǒng)一語(yǔ)法了。

如果在 Vue3 的 Setup 語(yǔ)法外使用 Pinia 呢？

如果你準(zhǔn)備在 Vue3 的 Setup 語(yǔ)法外引入 Pinia 的 Store，例如 useCounterStore。

直接 import { useCounterStore } from "@/store/modules/xxxxxx" 是不行的，你得像這樣：

import store from "@/store"
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})
/** 在 setup 外使用 */
export function useCounterStoreHook() {
  return useCounterStore(store)
}

然后引入 import { useCounterStoreHook } from "@/store/modules/xxxxxx" 即可！

集成好 Pinia 的模板

最后自薦一下這個(gè)輕量級(jí) Vue3 后臺(tái)管理模板，集成好了 Pinia 并且語(yǔ)法正是 Setup Stores！

GitHub: v3-admin-vite

Gitee: v3-admin-vite

以上就是Pinia 的 Setup Stores 語(yǔ)法使用實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于Pinia Setup Stores 語(yǔ)法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: