Pinia

直观、类型安全且灵活的 Vue 状态管理库

💡 直观
🔑 类型安全
⚙️ 开发工具支持
🔌 可扩展
🏗 模块化设计
📦 极其轻量
⛰️ Nuxt 模块

Pinia 同时支持 Vue 2 和 Vue 3。

Pinia 是西班牙语单词"菠萝"（piña）在英语中最相近的发音。菠萝实际上是一组独立的花朵结合在一起形成的复合果实。与存储类似，每个存储都是独立创建的，但最终它们都是相互关联的。菠萝也是一种原产于南美洲的美味热带水果。

👉 Vue 3 在 StackBlitz 上的演示

👉 Nuxt 3 在 StackBlitz 上的演示

帮助我继续开发这个项目 💚

银牌赞助商

铜牌赞助商

常见问题

关于本项目的一些说明和可能的问题：

问：Pinia 是 Vuex 的继任者吗？

答：是的

问：动态模块怎么办？

答：动态模块不是类型安全的，所以我们允许创建不同的 store，可以在任何地方导入

安装

# 或使用 pnpm 或 yarn
npm install pinia

如果您使用的是 Vue <2.7 版本，请确保安装最新的 @vue/composition-api：

npm install pinia @vue/composition-api

使用方法

安装插件

创建一个 pinia（根 store）并将其传递给应用：

// Vue 3
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

// Vue 2
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他选项...
  // ...
  // 注意：同一个 `pinia` 实例可以在同一页面的多个 Vue 应用中使用
  pinia,
})

如需更详细的说明，包括 Nuxt 配置，请查看文档。

创建 Store

您可以创建任意数量的 store，它们应该分别存在于不同的文件中：

import { defineStore } from 'pinia'
// main 是存储的名称。它在应用程序中是唯一的，并会出现在开发工具中
export const useMainStore = defineStore('main', {
  // 返回新状态的函数
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // 可选的getter
  getters: {
    // getter接收state作为第一个参数
    doubleCounter: (state) => state.counter * 2,
    // 在其他getter中使用getter
    doubleCounterPlusOne(): number {
      return this.doubleCounter + 1
    },
  },
  // 可选的actions
  actions: {
    reset() {
      // `this`是存储实例
      this.counter = 0
    },
  },
})

defineStore返回一个必须调用以访问存储的函数：

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const main = useMainStore()

    // 提取特定的存储属性
    const { counter, doubleCounter } = storeToRefs(main)

    return {
      // 在模板中提供对整个存储的访问
      main,
      // 仅提供对特定状态或getter的访问
      counter,
      doubleCounter,
    }
  },
})

文档

要了解更多关于Pinia的信息，请查看其文档。

许可证

MIT