VueX模块化使用(超级实用)
State
驱动应用的数据源,用于保存所有组件的公共数据.。
Getter
可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Mutation
mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用
Action
Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用 store.dispatch 调用mutation 去实现state的修改。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
模块化文件结构
index.js
getters.js (这里把studentList过滤成2个属性 stuName stuID)
stuentList.js
(Vuex官方推荐使用常量替代 Mutation 事件类型 图中SET_STU_NAME)
mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 回调接收第一个参数是state,后面是要修改的参数
在action中提交Mutation去修改state(特别是我们需要调用 commit 很多次的时候,可以通过结构的方法)
在组件中保存数据
通过this.$store.dispatch("<action的名称>", 要保存的状态)派发action
下图将原状态 张三和888修改为李四 和9999
浏览器界面
点击换名称和换ID 状态被保存和更换
总结
以上是生活随笔为你收集整理的VueX模块化使用(超级实用)的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: 和秋叶一起学PPT之绘制表格(课时七)
- 下一篇: 时间序列分析:非平稳序列的确定性分析