Pinia

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

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

Pinia 同时支持 Vue 2 和 Vue 3。

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

👉 Vue 3 在 StackBlitz 上的演示

👉 Nuxt 3 在 StackBlitz 上的演示

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

<h4 align="center">银牌赞助商</h4> <p align="center"> <a href="https://route4me.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://yellow-cdn.veclightyear.com/835a84d5/15a64ba0-9679-483b-94fc-46be271a41f7.png" media="(prefers-color-scheme: dark)" height="42px" alt="路线优化和路线规划软件" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/15a64ba0-9679-483b-94fc-46be271a41f7.png" height="42px" alt="路线优化和路线规划软件" /> </picture> </a> <a href="https://www.prefect.io/" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg" media="(prefers-color-scheme: dark)" height="42px" alt="Prefect" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/b175800e-05e5-46b2-a9c9-32131d8c9191.svg" height="42px" alt="Prefect" /> </picture> </a> <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/d0224cd9-5e03-43d8-98ee-1f4edd959307.svg" height="42px" alt="VueMastery" /> </picture> </a> </p> <h4 align="center">铜牌赞助商</h4> <p align="center"> <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://yellow-cdn.veclightyear.com/835a84d5/0de147c6-291e-42a8-ae51-7022cd127e1f.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/0de147c6-291e-42a8-ae51-7022cd127e1f.png" height="26px" alt="Storyblok" /> </picture> </a> <a href="https://ui.nuxt.com/pro" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://posva-sponsors.pages.dev/logos/nuxt-dark.svg" media="(prefers-color-scheme: dark)" height="26px" alt="Nuxt UI Pro 模板" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/5bfd6bb9-cb3c-426c-ab52-2857b18bfa01.svg" height="26px" alt="Nuxt UI Pro 模板" /> </picture> </a> <a href="https://www.vuejs.de" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" /> <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" /> </picture> </a> <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer"> <picture> <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" /> <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" /> </picture> </a> </p>

常见问题

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

问：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,
    }
  },
})