Pinia的使用是怎样 与Vuex有何不一样
|
在实际应用中，我们有时候会遇到“Pinia的使用是怎样，与Vuex有何不同？”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“Pinia的使用是怎样，与Vuex有何不同？”文章能帮助大家解决问题。 Pinia官网介绍说：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具，那么两者有什么区别呢？ pinia只有store、getter、actions，么有mutations，简化了状态管理的操作 pinia模块划分不需要modules， pinia自动化代码拆分 pinia对ts支持很好以及vue3的composition API pinia体积更小，性能更好 使用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.js 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 在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() }; 关于“Pinia的使用是怎样，与Vuex有何不同？”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
