vue3使用Pinia的store的组件化开发模式详解_Javascript

一、安装与初始化

安装pinia

npm install pinia  # 或 yarn add pinia

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

挂载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

引入store实例

在组件<script setup>中调用store：

<script setup>
import { usecounterstore } from '@/stores/counter'
const counterstore = usecounterstore() // 实例化store
</script>

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

模板中访问状态与方法

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

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

四、高级功能扩展

状态持久化（示例）

安装插件并配置：

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']  // 指定需持久化的字段
  }
})

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