Pinia 中文文档

# 不使用 setup() 的用法

即使不使用Composition API，也可以使用Pinia(如果您使用的是Vue 2，就需要安装@vue/composition-api插件)。虽然我们建议您尝试使用Composition API或者学习它，但现在对于您和您的团队可能还不是时候，您可能正在迁移应用程序的过程中，或者出于其他原因。这儿有几个可能帮到你函数:

# 获取整个 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')
      }
    },
  },
}

默认情况下，Pania将为所有store的id添加"Store"后缀。您也可以通过调用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: ''
  }
}

WARNING 如果您使用TypeScript声明文件（如global.d.ts），请确保在它的头部引入'pinia'来公开所有现有的类型。

← 组合Stores →