Pinia 进阶指南：Setup Store-插件系统与状态持久化解析一文掌握
作者：袖梨
2026-05-27
Pinia作为Vue3生态中主流的状态管理工具，其Setup Store语法和插件系统能大幅提升开发效率。本文将深入解析这些高阶用法，助你打造更健壮的前端应用。
与传统状态管理方案相比，Pinia在以下三个方面表现出色：
Setup Store - 采用Composition API编写Store，实现更灵活的逻辑复用
插件机制 - 通过统一注入能力扩展Store功能，如日志记录和权限控制
持久化方案 - 确保页面刷新后状态不丢失，提升用户体验
一、Setup Store：用 Composition API 写 Store
1.1 为什么需要 Setup Store？
Pinia支持Option和Setup两种编码风格，后者采用Composition API实现：
// Option Store示例
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() { this.count++ }
}
})// Setup Store示例
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubleCount, increment }
})
Setup Store具备三项独特优势：
支持定义私有状态，不暴露内部实现细节
可自由组合Composition API功能
实现Store间逻辑复用
1.2 私有状态实现
通过控制return对象的内容，可以轻松实现状态私有化：
export const useAuthStore = defineStore('auth', () => {
const token = ref('')
const _tokenExpiry = ref(0) // 私有状态
function _checkTokenExpiry() {
return Date.now() > _tokenExpiry.value
}
return { token } // 仅暴露必要状态
})
1.3 Store组合实践
大型项目中Store间的依赖调用非常便捷：
export const useOrderStore = defineStore('order', () => {
const { items } = useCartStore()
const orders = ref([])
function createOrder() {
orders.value.push({
items: [...items.value]
})
}
return { createOrder }
})
1.4 常见问题
状态暴露问题：必须返回所有需要响应式的状态
// 错误示例：遗漏count
return { doubleCount }
配置位置：Setup Store的配置需放在第三个参数
defineStore(
'user',
() => { /*...*/ },
{ persist: true } // 正确位置
)
二、Pinia 插件系统
2.1 插件基础
插件通过函数形式扩展Store功能：
function myPlugin({ store }
