一、安装与初始化


安装Pinia

1. npm install pinia  # 或 yarn add pinia

复制代码

目的：引入Pinia核心库，为状态管理提供基础支持。

挂载Pinia实例

在

1. main.js

复制代码

中初始化并注入Vue应用：

1. import { createApp } from 'vue'
   
2. import { createPinia } from 'pinia'
   
3. import App from './App.vue'
   
4. 
   
5. const app = createApp(App)
   
6. const pinia = createPinia()
   
7. app.use(pinia)  // 关键！全局启用Pinia
   
8. app.mount('#app')

复制代码

作用：创建Pinia实例并与Vue3应用集成，使所有组件可访问Store。

二、创建Store（函数式写法）

使用Composition API风格定义Store（推荐）：

1. // stores/counter.js
   
2. import { defineStore } from 'pinia'
   
3. import { ref, computed } from 'vue'
   
4. 
   
5. export const useCounterStore = defineStore('counter', () => {
   
6.   // 1. 定义状态（相当于data）
   
7.   const count = ref(0)
   
8.   
   
9.   // 2. 定义计算属性（相当于getters）
   
10.   const doubleCount = computed(() => count.value * 2)
    
11.   
    
12.   // 3. 定义操作方法（相当于actions）
    
13.   function increment() {
    
14.     count.value++
    
15.   }
    
16. 
    
17.   // 暴露状态与方法
    
18.   return { count, doubleCount, increment }
    
19. })

复制代码

核心要点：

• 1. defineStore

  复制代码
  第一个参数为Store唯一ID（需全局唯一）
  
• 使用
  1. ref

  复制代码
  /
  1. computed

  复制代码
  等响应式API管理状态
  
• 通过函数返回值暴露需共享的状态与方法
  
• 注意这个的id和实际没什么关系，你最后还是使用useCounterStore 来获取对象
  

三、在组件中使用Store


引入Store实例

在组件

1. <script setup>

复制代码

中调用Store：

1. <script setup>import { useCounterStore } from '@/stores/counter'const counterStore = useCounterStore() // 实例化Store</script>

复制代码

特性：Store按需实例化，支持多组件复用且状态自动同步。

模板中访问状态与方法

1.    <template>
   
2.      <div>
   
3.        <p>当前计数：{{ counterStore.count }}</p>
   
4.        <p>双倍计数：{{ counterStore.doubleCount }}</p>
   
5.        <button @click="counterStore.increment()">+1</button>
   
6.      </div>
   
7.    </template>

复制代码

响应式原理：直接访问Store的属性会触发Vue的响应式更新。

四、高级功能扩展


状态持久化（示例）

安装插件并配置：

1. npm install pinia-plugin-persistedstate

复制代码

1. // main.js
   
2. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
   
3. pinia.use(piniaPluginPersistedstate)

复制代码

在Store中启用：

1. defineStore('counter', () => { /* ... */ }, {
   
2.   persist: {
   
3.     enabled: true,  // 开启持久化
   
4.     storage: sessionStorage,  // 可选存储方式（默认localStorage）
   
5.     paths: ['count']  // 指定需持久化的字段
   
6.   }
   
7. })

复制代码

作用：浏览器刷新后自动恢复指定状态。

模块化开发

• 创建多个Store文件（如
  1. userStore.js

  复制代码
  、
  1. cartStore.js

  复制代码
  ）
  
• 组件按需引入不同Store，实现逻辑解耦
  

五、调试技巧

Vue Devtools集成
安装浏览器插件后，可查看Store状态变化历史与时间旅行调试。
自定义插件
可开发日志插件跟踪状态变更（示例见网页4的日志监控代码）。

总结

通过以上步骤可实现：

• ✅ 响应式状态管理：基于Composition API的Store声明
  
• ✅ 跨组件共享：多组件间高效同步复杂状态
  
• ✅ 可维护性：模块化Store设计与类型安全（天然支持TS）
  
• ✅ 扩展性：通过插件实现持久化、日志等高级功能
  

对比Vuex，Pinia的函数式Store语法更简洁，且与Vue3的Composition API深度契合，推荐作为Vue3项目的首选状态管理方案。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339865vkq.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！