无需 setup() 的使用

即使您没有使用组合 API，也可以使用 Pinia（如果您使用的是 Vue <2.7，则仍然需要安装 @vue/composition-api 插件）。虽然我们建议您尝试一下组合 API 并学习它，但现在可能还不是您和您的团队的最佳时机，您可能正在迁移应用程序，或者其他任何原因。有一些函数

• mapStores
• mapState
• mapWritableState
• ⚠️ mapGetters（仅用于迁移方便，请改用 mapState()）
• mapActions

提供对整个 Store 的访问权限

如果您需要访问 Store 中几乎所有内容，可能映射 Store 的每个属性都太麻烦了... 相反，您可以使用 mapStores() 访问整个 Store

import { mapStores } from 'pinia'

// given two stores with the following ids
const useUserStore = defineStore('user', {
  // ...
})
const useCartStore = defineStore('cart', {
  // ...
})

export default {
  computed: {
    // note we are not passing an array, just one store after the other
    // each store will be accessible as its id + 'Store'
    ...mapStores(useCartStore, useUserStore)
  },

  methods: {
    async buyStuff() {
      // use them anywhere!
      if (this.userStore.isAuthenticated()) {
        await this.cartStore.buy()
        this.$router.push('/purchased')
      }
    },
  },
}

默认情况下，Pinia 会将 "Store" 后缀添加到每个 Store 的 id 中。您可以通过调用 setMapStoreSuffix() 来自定义此行为

import { createPinia, setMapStoreSuffix } from 'pinia'

// completely remove the suffix: this.user, this.cart
setMapStoreSuffix('')
// this.user_store, this.cart_store (it's okay, I won't judge you)
setMapStoreSuffix('_store')
export const pinia = createPinia()

TypeScript

默认情况下，所有映射助手都支持自动完成，您无需执行任何操作。如果您调用 setMapStoreSuffix() 来更改 "Store" 后缀，则还需要在 TS 文件或 global.d.ts 文件中的某个地方添加它。最方便的地方是在您调用 setMapStoreSuffix() 的同一位置

import { createPinia, setMapStoreSuffix } from 'pinia'

setMapStoreSuffix('') // completely remove the suffix
export const pinia = createPinia()

declare module 'pinia' {
  export interface MapStoresCustomization {
    // set it to the same value as above
    suffix: ''
  }
}

警告

如果您使用的是 TypeScript 声明文件（如 global.d.ts），请确保在顶部 import 'pinia' 以公开所有现有类型。