核心概念
State:这是你的应用程序的状态,是一个响应式的对象。
Getters:类似于 Vuex 中的 getters,它们是基于 state 的计算属性。
Actions:类似于 Vuex 中的 mutations 和 actions,它们用于改变 state。但与 Vuex 不同的是,在 Pinia 中,mutations 和 actions 被合并为一个概念,即 actions。
其他特性:Pinia 还支持插件、热重载、服务器端渲染等。
安装
npm install pinia  
# 或者使用 yarn  
yarn add pinia
main.js
import { createApp } from 'vue'  
import { createPinia } from 'pinia'  
import App from './App.vue'  const app = createApp(App)  
const pinia = createPinia()  app.use(pinia)  
app.mount('#app')
store/counter.js
import { defineStore } from 'pinia'  export const useCounterStore = defineStore('counter', {  // state  state: () => ({  count: 0,  }),  // getters  getters: {  doubleCount: (state) => state.count * 2,  },  // actions  actions: {  increment() {  this.count++  },  decrement() {  this.count--  },  // 你也可以在 actions 中使用其他 actions 或 getters  incrementBy(amount) {  this.count += amount  },  },  
})
App.vue
<template>  <div>  <p>Count: {{ counterStore.count }}</p>  <p>Double Count: {{ counterStore.doubleCount }}</p>  <button @click="counterStore.increment">Increment</button>  <button @click="counterStore.decrement">Decrement</button>  <button @click="counterStore.incrementBy(5)">Increment by 5</button>  </div>  
</template>  <script>  
import { useCounterStore } from './store/counter'  export default {  setup() {  const counterStore = useCounterStore()  return { counterStore }  },  
}  
</script>
扩展 Store
由于有了底层 API 的支持,Pinia store 现在完全支持扩展。以下是你可以扩展的内容:
为 store 添加新的属性
定义 store 时增加新的选项
为 store 增加新的方法
包装现有的方法
改变甚至取消 action
实现副作用,如本地存储
仅应用插件于特定 store
1. 插件 (Plugins)
插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。
import { createPinia } from 'pinia'// 创建的每个 store 中都会添加一个名为 `secret` 的属性。
// 在安装此插件后,插件可以保存在不同的文件中
function SecretPiniaPlugin() {return { secret: 'the cake is a lie' }
}const pinia = createPinia()
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin)// 在另一个文件中
const store = useStore()
store.secret // 'the cake is a lie'
2. 持久化状态 (Persistence)
 代码示例(使用第三方插件 pinia-plugin-persistedstate):
npm install pinia-plugin-persistedstate
import { createApp } from 'vue';  
import { createPinia } from 'pinia';  
import createPersistedState from 'pinia-plugin-persistedstate';  const pinia = createPinia();  // 使用插件  
pinia.use(createPersistedState({  storage: window.localStorage,  
}));  const app = createApp(/* ... */);  
app.use(pinia);  
// ...
3. 订阅状态变化 (Subscribing to State Changes)
 Pinia 允许你订阅 Store 的状态变化,以便在状态更新时执行某些操作。这可以通过 pinia.state.subscribe 方法实现。
 代码示例(在插件中使用):
// 插件中的代码  
app.pinia.state.subscribe((mutation, state) => {  // mutation 是一个对象,包含 type('direct' 或 'patch')和 key  // state 是 Store 的当前状态  console.log('State mutated:', mutation, state);  
});
4. 使用 TypeScript 进行类型安全
 如果你在使用 TypeScript,Pinia 提供了强大的类型支持,确保你的代码是类型安全的。你可以为 state、getters 和 actions 提供类型定义。
代码示例(使用 TypeScript):
import { defineStore } from 'pinia';  interface CounterState {  count: number;  
}  export const useCounterStore = defineStore('counter', {  state: (): CounterState => ({  count: 0,  }),  // ...  
});
5. 访问其他 Store
 在 Pinia 中,一个 Store 可以很容易地访问另一个 Store 的状态和方法。你可以直接在 Store 的 actions 中使用 useStore 函数来访问其他 Store。
代码示例:
import { defineStore } from 'pinia';  
import { useOtherStore } from './otherStore';  export const useCounterStore = defineStore('counter', {  // ...  actions: {  incrementAndDoSomethingElse() {  this.count++;  const otherStore = useOtherStore();  otherStore.doSomething();  },  },  
});
在组件外部使用 Store
1. 创建 Pinia 实例和 Store
 首先,你需要在你的主入口文件(如 main.js 或 main.ts)中创建 Pinia 实例,并使用它创建你的 Store。
// main.js  
import { createApp } from 'vue'  
import { createPinia } from 'pinia'  
import App from './App.vue'  const app = createApp(App)  
const pinia = createPinia()  // 使用 Pinia  
app.use(pinia)  // 挂载应用  
app.mount('#app')  // 假设你有一个名为 useCounterStore 的 Store  
// import { useCounterStore } from './stores/counter'  
// 但在这里我们不会直接在 main.js 中使用它
2. 在组件外部使用 Store
 示例:在路由守卫中使用 Store
 假设你有一个名为 useUserStore 的 Store,用于管理用户状态,并且你想在路由守卫中检查用户是否已登录。
// router/index.js  
import { createRouter, createWebHistory } from 'vue-router'  
import { useUserStore } from './stores/user' // 假设你的 Store 在这里  
import pinia from '../main' // 引入 Pinia 实例(你可能需要根据你的项目结构来调整这个路径)  const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes: [  // ...你的路由配置  ],  
})  // 在路由守卫中使用 Store  
router.beforeEach((to, from, next) => {  // 使用 pinia.useStore() 获取 Store 实例  const userStore = pinia.useUserStore()  // 假设有一个 isLoggedIn 的 getter 或 state 属性  if (to.meta.requiresAuth && !userStore.isLoggedIn) {  // 重定向到登录页面或执行其他操作  next('/login')  } else {  next()  }  
})  export default router