在vue项目中使用vuex实现状态管理的案例
青春岁月共勉2020-05-16 18:20
说明：其实如果项目不是很庞大很复杂，没有涉及到很多状态值需要被很多页面或组件共用；或者某个页面或组件的行为会对其他页面或组件造成依赖性的影响。并不需要使用vuex。vuex的使用与否在实际开发中应该视项目情况而定。
准备工作：
a.在vue项目中安装vuex: npm install vuex -S。
b.了解下vuex的五个属性。
vuex个属性五个属性的作用：
state：用来存储vuex的基本数据。getter：可以说相当于state的计算属性，对vuex的基本数据进行一些操作。mutations：提交变更的数据，只能处理同步函数。actions：不能直接改变state的数据，而是提交一个mutations，任意的异步行为都应该在actions中。modules：模块化管理vuex，实现项目中拆分的每个功能模块都有各自的 state，getter，mutations，actions。(这个基本很少用到)demo的演示：
在项目的src目录创建一个store目录，并创建一个index.js文件：
该js文件，引入一个vue实例，和一个vuex实例，将vuex挂载到当前的vue实例，并创建一个store对象，向外暴露store对象：
我这里另外创建了两个组件，分别作为A页面和B页面，共享state中的一个状态值num(默认值我给他100)
A页面和B页面使用state中的num属性：
在template直接使用时：$store.state.num；
data中或methods中使用：this.$store.state.num；
当项目启动进入A页面：
进入B页面：
在页面A中改变num的值：
store目录的index.js文件中actions里边的方法：
1.A页面更改number值后，dispatch操作，触发actions对象里边对应的方法editfun,
editfun有两个参数，context为上下文对象，n为接收A页面传过来的参数的形参。
2.actions不对state的状态值进行更改，只是commit一个对应的mutations，mutations直接更新state中的num的值
先讲下getters的使用：
其实getters就想到与vue组件中的computed属性，是对state中的属性(比如num)，进行一些列额外的操作，比如我这里对当前num进行奇偶数判断：
页面中如何使用getters处理过后的state中的属性num(以A页面为例)：
但我点击减一时(A页面)：
点击跳转到B页面看下是否引用的num是否也是99：
最终是成功实现共享了
最终效果：
00:30
最后有一点补充：关于为啥vuex官方约定异步操作一定要写在actions中，同步操作一定要写在mutations中，我做了一个测试，如下：
a. 我就在muations中模拟下异步返回num(10s后才返回)，发现页面是更新了，但是与vue-devtools调试工具追踪到的数据不一致。
b. 因此我把mutations中的10后才返回数据注释掉，加到actions中，使用vue-devtools跟踪下数据的状态，发现页面更新了，追踪到的数据也是最新的，和页面一致：
因此，到底是不是因为追踪的数据不一致原因，才约定将异步操作放在actions中，我不敢肯定。但是，为了规范和方便自己使用vue-devtools追踪数据查看相关操作的结果，我觉得遵循vuex的约定，规范点总是没错的。
举报/反馈
0
0
收藏
分享
