vue项目中怎么用pinia状态管理工具？下面本篇文章带大家聊聊vue项目中pinia状态管理工具的使用，希望对大家有所帮助！
pinia官网介绍说：pinia 是 vue 的存储库，它允许您跨组件/页面共享状态。vuex同样可以作为状态管理工具，那么两者有什么区别呢？
pinia与vuex的区别pinia只有store、getter、actions，么有mutations，简化了状态管理的操作。【相关推荐：vuejs视频教程、web前端开发】pinia模块划分不需要modules，pinia自动化代码拆分pinia对ts支持很好以及vue3的composition apipinia体积更小，性能更好使用pinia definestore( ) 方法的第一个参数：容器的名字，名字必须唯一，不能重复
definestore( ) 方法的第二个参数：配置对象，放置state，getters，actions
state 属性： 用来存储全局的状态
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能
actions属性： 修改state全局状态数据，可以是异步也可以是同步
pinia可以用于vue2.x也可以用于vue3.x中
安装yarn add pinia -s
main.js引入import {createapp} from "vue"import app from "./app.vue"import store from "./store/index.js"const app = createapp(app);const store = createpinia();app.use(store).mount("#app")
在store文件夹下新建test.jsimport {definepinia} from "pinia"export default teststore = definepinia('testid',{ state:()=>{ tname:"test", tnum:0, }, getters:{ changetnum(){ console.log("getters") this.tnum++; } }, actions:{ addnum(val){ this.tnum += val } }, //持久化存储配置 presist:{ enable:true,// strategies:[ { key:"testid", storage:localstorage, paths:['tnum'] } ] }})

在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this。actions里的this指向当前store
在store文件夹下新建index.js，便于管理import {createpinia} from "pinia"const store = createpinia();export default store
新建a.vue组件，引入store模块和storetorefs方法
storetorefs：解构store中的数据，使之成为响应式数据<template> <div> <div> {{tname}}</div> <div> {{tid}}</div> <div> tnum: {{tnum}}</div> <div> {{tchangenum}}</div> <div><button @click="tchangename">修改</button></div> <div> <button @click="treset">重置</button></div> <div @click="actionsbtn">actionsbtn</div> </div></template>
<script setup>import { storetorefs } from 'pinia'import { usestore } from '../store/user'import { usetest } from '../store/test.js'const teststore = usetest();let { tname, tchangenum, tnum } = storetorefs(teststore)</script>
直接修改数据的两种方式直接修改数据与使用$path修改数据相比，官方已经明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。
虽然可以直接修改，但是出于代码结构来说， 全局的状态管理还是不要直接在各个组件处随意修改状态，应放于actions中统一方法修改（piain没有mutation）。
//直接修改数据tchangename(){ tname.value = "测试数据"； tnum.value++;}//当然也可以使用`$path`批量修改tchangename(){ teststore.$path(state=>{ state.tname = "测试数据"； state.value = 7; })}
使用actions修改数据直接调用actions中的方法，可传参数
const actionsbtn = (){ teststore.addnum(5) }
重置state中数据store中有$reset方法，可以直接对store中数据重置
const treset = (){ teststore.$reset()}
pinia持久化存储实现持久化存储，需要配合以下插件使用yarn add pinia-plugin-persist
配置store文件夹下的index.js文件，引入pinia-plugin-presist插件import {createpinia} from "pinia"import piniapluginpresist from "pinia-plugin-presist"const store = createpinia();store.use(piniapluginpresist)export default store
配置stroe文件夹下的test.js文件，使用presist属性进行配置import {definepinia} from "pinia"export default teststore = definepinia('testid',{ state:()=>{ tname:"test", tnum:0, }, getters:{ changetnum(){ console.log("getters") this.tnum++; } }, actions:{ addnum(val){ this.tnum += val } }, //持久化存储配置 presist:{ enable:true,// strategies:[ { key:"testid", storage:localstorage, paths:['tnum'] } ] }})

enable:true，开启持久化存储，默认为使用sessionstorage存储
- strategies，进行更多配置
- key，不设置key时，storage的key为definepinia的第一个属性，设置key值，则自定义storage的属性名 storage:localstorage，设置缓存模式为本地存储paths，不设置时对state中的所用数据进行持久化存执，设置时只针对设置的属性进行持久化存储pinia模块化实现模块化实现即在store对要使用的模块新建一个js文件，比如user.js文件。然后配置内容跟其他模块一样，根据自己需求进行设置，然后在对应页面引入。
pinia中store之间互相调用比如：test.js获取user.js中state的name属性值，在test.js引入user.js
import { definestore } from 'pinia'import { userstore } from "./user.js"export const usetest = definestore("testid", { state: () => { return { tid: "111", tname: "pinia", tnum: 0 } }, getters: { tchangenum() { console.log('getters') return this.tnum + 100 } }, actions: { tupnum(val) { console.log('actions') this.tnum += val; }, getuserdata() { console.log(usestore().name); return usestore().name; }, }, persist: { //走的session enabled: true, strategies: [ { key: "my_testid", storage: localstorage, paths: ['tnum'] } ] }})
user.js中
import { definestore } from 'pinia'export const usestore = definestore('storeid', { state: () => { return { num: 0, name: '张三' } }})
a.vue组件中，调用test.js中getuserdata方法就可以得到uesr.js中的name值
const actionbtn = () => { teststore.getuserdata()};
（学习视频分享：编程基础视频）
以上就是浅析vue项目中怎么用pinia状态管理工具的详细内容。