vue3当中使用Pinia的store的组件化开发模式

一、安装与初始化

1. 安装Pinia

   npm install pinia  # 或 yarn add pinia
   

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

2. 挂载Pinia实例
   在main.js中初始化并注入Vue应用：

   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import App from './App.vue'
   
   const app = createApp(App)
   const pinia = createPinia()
   app.use(pinia)  // 关键！全局启用Pinia
   app.mount('#app')
   

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

---

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

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

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // 1. 定义状态（相当于data）
  const count = ref(0)
  
  // 2. 定义计算属性（相当于getters）
  const doubleCount = computed(() => count.value * 2)
  
  // 3. 定义操作方法（相当于actions）
  function increment() {
    count.value++
  }

  // 暴露状态与方法
  return { count, doubleCount, increment }
})

核心要点：

• defineStore第一个参数为Store唯一ID（需全局唯一）
• 使用ref/computed等响应式API管理状态
• 通过函数返回值暴露需共享的状态与方法
• 注意这个的id和实际没什么关系，你最后还是使用useCounterStore 来获取对象

---

三、在组件中使用Store

1. 引入Store实例
   在组件<script setup>中调用Store：

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

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

2. 模板中访问状态与方法

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

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

---

四、高级功能扩展

1. 状态持久化（示例）

安装插件并配置：

npm install pinia-plugin-persistedstate

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

在Store中启用：

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

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

2. 模块化开发

• 创建多个Store文件（如userStore.js、cartStore.js）
• 组件按需引入不同Store，实现逻辑解耦

---

五、调试技巧

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

---

总结

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

对比Vuex，Pinia的函数式Store语法更简洁，且与Vue3的Composition API深度契合，推荐作为Vue3项目的首选状态管理方案。