经验总结

  1. 首页 > 生活 > >

vue3中pinia的使用总结( 二 )

生活百科


  • defineStore( )方法的第一个参数：相当于为容器起一个名字 。注意：这里的名字必须唯一，不能重复 。这个是官方特别说明的一个事情 。
  • defineStore( )方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明 。当然这种说明是以对象的形式 。
  • state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了 。
  • getters属性：用来监视或者说是计算状态的变化的，有缓存的功能 。
  • actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同 。说白了就是修改state全局状态数据的 。
如果你会Vuex的话，上面这些内容可能对你来说没什么难度 。但如果你不会Vuex，现在只要知道这段代码大概的意思就可以，不用深究 。随着我们学习的深入，你会有更具体的了解 。
vue3中pinia的使用总结

文章插图
在vue3组件里面 读取store数据
在vue文件中引入store，然后通过store得到store实例
vue3中pinia的使用总结

文章插图

vue3中pinia的使用总结

文章插图

vue3中pinia的使用总结

文章插图
Pinia改变状态数据和注意事项
我在学习的时候发现了这样一个坑，在这里也和大家分享一下 。希望小伙伴们不要踩坑 。看下面的代码，我们是否可以简化一点 。
vue3中pinia的使用总结

文章插图
我们可以把store进行结构，然后直接template中直接这样读出数据 。
vue3中pinia的使用总结

文章插图
这样看似简单，但通过解构的数据，只有一次作用，不是响应式数据（这就是我踩的坑了） 。也就是说当你改变数据状态时，解构的状态数据不会发生变化 。我们这时候再点击增加按钮，可以看到只有没结构的数据发生了变化 。
于是我开始查找官方文档，显然Pinia团队也发现了这个问题，提供了storeToRefs( )方法 。这个方法Pinia中，所以我们先用import引入 。
vue3中pinia的使用总结

文章插图

vue3中pinia的使用总结

文章插图
这时候再到浏览器中测试一下，就一切正常了 。补充：其实在Vuex中，直接解构数据也是不可以的 。
Pinia修改状态数据的多种方式
1.普通方式修改数据
vue3中pinia的使用总结

文章插图
2.$patch修改数据(修改多条建议使用) $patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处
vue3中pinia的使用总结

文章插图
3.$patch加函数的方式修改数据（这种方法适合复杂数据的修改，比如数组、对象的修改 。）
vue3中pinia的使用总结

文章插图
4.在actions中写好逻辑，在调用actions
如果你有一个修改的过程非常复杂，你可以先在store里，定义好actions中的函数，然后在组件里再调用函数 。
vue3中pinia的使用总结

文章插图
在vue中使用
vue3中pinia的使用总结

文章插图
5.在pinia中使用Getters
Pinia中的Getter和Vue中的计算属性几乎一样，就是在获取State的值时作一些处理 。比如我们有这样一个需求，就是在state里有有一个状态数据是电话号码，我们想输出的时候把中间四位展示为****.这时候用getters就是非常不错的选择 。

经验总结扩展阅读


上一篇：库车海拔

下一篇：电脑上的播放器怎么改音轨