状态管理 分类

集成Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范

提示

中文文档：https://pinia.web3doc.top/

刘春龙原创2026/3/5大约 1 分钟

解构赋值响应式

如果直接从 pinia 中解构数据，会丢失响应式

<template>
  <p>count:{{ count }}</p>
  <p>doubleCount:{{ doubleCount }}</p>
  <button @click="countAdd">count ++</button>
</template>
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
const { count, doubleCount } = counterStore
const countAdd = () => {
  counterStore.increment()
}
</script>

刘春龙原创2026/3/5小于 1 分钟

Pinia热更新

pinia 支持热模块替换，因此你可以编辑 store，并直接在您的应用程序中与它们交互，而无需重新加载页面，允许您保持现有的状态，添加，甚至删除 state，action 和 getter

import { ref, computed } from 'vue'
import { defineStore, acceptHMRUpdate } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(1)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  const countX3 = () => {
    count.value = count.value * 3
  }

  return { count, doubleCount, increment, countX3 }
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot))
}

刘春龙原创2026/3/5小于 1 分钟

持久化插件

pinia 有个副作用，就是无法持久化，在浏览器刷新重置之后，会全部回复默认，这时候，我们可以利用插件实现本地持久化存储

安装

npm install --save pinia-plugin-persistedstate

刘春龙原创2026/3/5小于 1 分钟