文章插图
在vue3组件里面 读取store数据
在vue文件中引入store，然后通过store得到store实例
文章插图
文章插图
文章插图
Pinia改变状态数据和注意事项
我在学习的时候发现了这样一个坑，在这里也和大家分享一下 。希望小伙伴们不要踩坑 。看下面的代码，我们是否可以简化一点 。
文章插图
我们可以把store进行结构，然后直接template中直接这样读出数据 。
文章插图
这样看似简单，但通过解构的数据，只有一次作用，不是响应式数据（这就是我踩的坑了） 。也就是说当你改变数据状态时 ， 解构的状态数据不会发生变化 。我们这时候再点击增加按钮，可以看到只有没结构的数据发生了变化 。
于是我开始查找官方文档，显然Pinia团队也发现了这个问题 ， 提供了storeToRefs( )方法 。这个方法Pinia中，所以我们先用import引入 。
文章插图
文章插图
这时候再到浏览器中测试一下，就一切正常了 。补充：其实在Vuex中，直接解构数据也是不可以的 。
Pinia修改状态数据的多种方式
1.普通方式修改数据
文章插图
2.$patch修改数据(修改多条建议使用) $patch的方式是经过优化的，会加快修改速度 ， 对程序的性能有很大的好处
文章插图
3.$patch加函数的方式修改数据（这种方法适合复杂数据的修改 ， 比如数组、对象的修改 。）
文章插图
4.在actions中写好逻辑 ， 在调用actions
如果你有一个修改的过程非常复杂，你可以先在store里，定义好actions中的函数 ， 然后在组件里再调用函数 。
文章插图
在vue中使用
文章插图
5.在pinia中使用Getters
Pinia中的Getter和Vue中的计算属性几乎一样，就是在获取State的值时作一些处理 。比如我们有这样一个需求，就是在state里有有一个状态数据是电话号码，我们想输出的时候把中间四位展示为****.这时候用getters就是非常不错的选择 。
文章插图
在vue中使用它
文章插图
Getters是有缓存特性的，现在我们的组件中调用多次 ， 但是在store仓库中其实就调用了一次 。
6.this的使用
在actions里面是可以使用this的，其实在getters里面也是可以使用的，使用方式如下：
文章插图
7.pinia中的store是可以相互调用的
文章插图
以上就是对pinia使用的总结啦！
【vue3中pinia的使用总结】
推荐阅读
- vue3的Async Components异步组件
- 中国十大历史名城 中国历史名城排名
- 中国海鲜城市前十排名是哪些 中国排名前十图
- [CG从零开始] 5. 搞清 MVP 矩阵理论 + 实践
- 微博发照片怎么改水印的位置我想把它放到中间
- 微博标怎么弄中间去（微博的水印怎么移到中间)
- 怎么把微博文字弄到中间（微博logo怎么移到中间)
- 怎么把微博的标志放到中间（微博右下角的标签怎么移到中间)
- 手机微博怎么把水印移到中间（手机微博如何去水印)
- 发微博怎么把水印放到图片中间啊（微博怎么不带水印)