Pinia官网介绍说：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具，那么两者有什么区别呢？
Pinia与Vuex的区别
pinia只有store、getter、actions，么有mutations，简化了状态管理的操作。【相关推荐：vuejs视频教程、web前端开发】pinia模块划分不需要modules，pinia自动化代码拆分pinia对ts支持很好以及vue3的composition APIpinia体积更小，性能更好使用Pinia
安装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")登录后复制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"] } ] }})登录后复制在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this。actions里的this指向当前store
【资料图】
import {createPinia} from "pinia"const store = createPinia();export default store登录后复制A.vue组件，引入store模块和storeToRefs方法storeToRefs：解构store中的数据，使之成为响应式数据 {{tname}} {{tid}} tnum: {{tnum}} {{tchangeNum}} actionsBtn
登录后复制<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登录后复制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: {//走的sessionenabled: 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状态管理工具的详细内容，更多请关注php中文网其它相关文章！
