Pinia 不使用 `setup()` 的用法

不使用 setup() 的用法usage-without-setup}

即使你沒有使用組合式 API，也可以使用 Pinia(如果你使用 Vue 2，你仍然需要安裝 @vue/composition-api 插件)。雖然我們推薦你試著學(xué)習(xí)一下組合式 API，但對(duì)你和你的團(tuán)隊(duì)來說目前可能還不是時(shí)候，你可能正在遷移一個(gè)應(yīng)用，或者有其他原因。

給予整個(gè) store 的訪問權(quán)

如果你需要訪問 store 里的大部分內(nèi)容，映射 store 的每一個(gè)屬性可能太麻煩。你可以試試用 mapStores() 來訪問整個(gè) store：

import { mapStores } from 'pinia'


// 給出具有以下 id 的兩個(gè) store
const useUserStore = defineStore('user', {
  // ...
})
const useCartStore = defineStore('cart', {
  // ...
})


export default {
  computed: {
    // 注意，我們不是在傳遞一個(gè)數(shù)組，而是一個(gè)接一個(gè)的 store。
    // 可以 id+'Store' 的形式訪問每個(gè) store 。
    ...mapStores(useCartStore, useUserStore)
  },


  methods: {
    async buyStuff() {
      // 可以在任何地方使用他們！
      if (this.userStore.isAuthenticated()) {
        await this.cartStore.buy()
        this.$router.push('/purchased')
      }
    },
  },
}

默認(rèn)情況下，Pinia 會(huì)在每個(gè) store 的 id 后面加上 "Store" 的后綴。你可以通過調(diào)用 setMapStoreSuffix() 來自定義：

import { createPinia, setMapStoreSuffix } from 'pinia'


// 完全刪除后綴：this.user, this.cart
setMapStoreSuffix('')
// this.user_store, this.cart_store (沒關(guān)系，我不會(huì)批評(píng)你的)
setMapStoreSuffix('_store')
export const pinia = createPinia()

TypeScript

默認(rèn)情況下，所有映射輔助函數(shù)都支持自動(dòng)補(bǔ)全，你不需要做任何事情。如果你調(diào)用 setMapStoreSuffix() 修改了 "Store" 的后綴，你還需要在 TS 文件或 global.d.ts 文件的某個(gè)地方添加它。最方便的地方就是你調(diào)用 setMapStoreSuffix() 的地方：

import { createPinia, setMapStoreSuffix } from 'pinia'


setMapStoreSuffix('') // 完全刪除后綴
export const pinia = createPinia()


declare module 'pinia' {
  export interface MapStoresCustomization {
    // 設(shè)置成和上面一樣的值
    suffix: ''
  }
}

如果你使用的是 TypeScript 聲明文件(如 global.d.ts)，請(qǐng)確保在文件頂部 import 'pinia'，以暴露所有現(xiàn)有類型。