欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > vue >内容正文

vue

VueX模块化使用(超级实用)

发布时间:2024/8/1 vue 65 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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模块化使用(超级实用)的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。