我要评论pinia
1.pinia的安装
2.使用pinia创建一个store
01.在main.js引入
- index.js
02.在src目录下创建store文件夹，在store文件夹下创建index.js文件
- index.js
在state里面定义一个helloworld
03.在默认模板helloworld.vue中使用，直接使用{{store.helloworld}}即可显示在界面上
- helloworld.vue
我们可以把helloworld给结构出来，pinia中给我们提供了一个方法storetorefs()，这样我们页面上就显示了两个hello world!
- helloworld.vue
3.pinia修改数据的4方式
01.在store中的index.js中新增一个count：0；然后在helloworld.vue中添加一个button，点击按钮count加1
- helloworld.vue
- helloworld.vue
02.使用$patch对象传递的方式（多数据情况下，相对01来说，更推荐使用这个方法，官方说$patch优化了），index.js代码不变
- helloworld.vue
03.使用$patch函数传递的方式（更适合处理复杂的业务逻辑），index.js代码不变
- helloworld.vue
04.业务逻辑更复杂的情况下，在index.js的actions中定义函数调用
- index.js
- helloworld.vue
4.getters的使用
类似于vue中的计算属性，比如我们有这样一个需求，就是在state里有有一个状态数据是电话号码，我们想输出的时候把中间四位展示为****.这时候用getters就是非常不错的选择。
- index.js
- helloworld.vue
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论