Pinia的使用以及数据持久化
2026-01-05 17:17:28
Pinia是Vue.js的轻量级状态管理库
官方网站：https://pinia.vuejs.org/
pinia和vuex4一样，也是vue官方的状态管理工具(作者是Vue核心团队成员）
pinia相比vuex4，对于vue3的兼容性更好
pinia相比vuex4，具备完善的类型推荐
pinia同样支持vue开发者工具,最新的开发者工具对vuex4支持不好
pinia核心概念
state:状态
actions:修改状态（包括同步和异步，pinia中没有mutations）
getters:计算属性
基本使用与state目标：掌握pinia的使用步骤
（1）安装
yarnaddpinia#ornpmipinia（2）在main.js中挂载pinia
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')（3）新建文件store/counter.js
import{defineStore}from'pinia'//创建store,命名规则：useXxxxStore//参数1：store的唯一表示//参数2：对象，可以提供stateactionsgettersconstuseCounterStore=defineStore('counter',{state:()=>{return{count:0,}},getters:{},actions:{},})exportdefaultuseCounterStore(4)在组件中使用
<scriptsetup>importuseCounterStorefrom'./store/counter'constcounter=useCounterStore()</script><template><h1>根组件---{{counter.count}}</h1></template><style></style>actions的使用目标：掌握pinia中actions的使用
在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。
（1）在actions中提供方法并且修改数据
import{defineStore}from'pinia'//1.创建store//参数1：store的唯一表示//参数2：对象，可以提供stateactionsgettersconstuseCounterStore=defineStore('counter',{state:()=>{return{count:0,}},actions:{increment(){this.count++},incrementAsync(){setTimeout(()=>{this.count++},1000)},},})exportdefaultuseCounterStore（2）在组件中使用
<scriptsetup>importuseCounterStorefrom'./store/counter'constcounter=useCounterStore()</script><template><h1>根组件---{{counter.count}}</h1><button@click="counter.increment">加1</button><button@click="counter.incrementAsync">异步加1</button></template>getters的使用pinia中的getters和vuex中的基本是一样的，也带有缓存的功能
（1）在getters中提供计算属性
import{defineStore}from'pinia'//1.创建store//参数1：store的唯一表示//参数2：对象，可以提供stateactionsgettersconstuseCounterStore=defineStore('counter',{state:()=>{return{count:0,}},getters:{double(){returnthis.count*2},},actions:{increment(){this.count++},incrementAsync(){setTimeout(()=>{this.count++},1000)},},})exportdefaultuseCounterStore(2)在组件中使用
<h1>根组件---{{counter.count}}</h1><h3>{{counter.double}}</h3>storeToRefs的使用目标：掌握storeToRefs的使用
如果直接从pinia中解构数据，会丢失响应式，使用storeToRefs可以保证解构出来的数据也是响应式的
<scriptsetup>import{storeToRefs}from'pinia'importuseCounterStorefrom'./store/counter'constcounter=useCounterStore()//如果直接从pinia中解构数据，会丢失响应式const{count,double}=counter//使用storeToRefs可以保证解构出来的数据也是响应式的const{count,double}=storeToRefs(counter)</script>pinia模块化在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合
（1）新建store/user.js文件
import{defineStore}from'pinia'constuseUserStore=defineStore('user',{state:()=>{return{name:'zs',age:100,}},})exportdefaultuseUserStore(2)新建store/index.js
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')0（3）在组件中使用
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')1pinia数据持久化目标：通过Pinia插件快速实现持久化存储。
插件文档：点击查看
用法安装
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')2使用插件在main.ts中注册
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')3模块开启持久化
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')4常见疑问模块做了持久化后，以后数据会不会变，怎么办？
先读取本地的数据，如果新的请求获取到新数据，会自动把新数据覆盖掉旧的数据。
无需额外处理，插件会自己更新到最新数据。
进阶用法需求：不想所有数据都持久化处理，能不能按需持久化所需数据，怎么办？
可以用配置式写法，按需缓存某些模块的数据。
import{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constpinia=createPinia()createApp(App).use(pinia).mount('#app')5总结：相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。
原文：https://juejin.cn/post/7101657189428756516热门标签
