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模块化使用（超级实用）相关推荐

java轻量级并行工具类_16 个超级实用的 Java 工具类
原标题:16 个超级实用的 Java 工具类源 /juejin 在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.以下工具类.方法按使用流行度排名, ...
APICloud开发者进阶之路 | 超级实用技巧
金秋9月,脑海还是北京的"中非合作蓝"!今天按照惯例,柚子君还是要督促大家充充电的! 本周<30天,App开发从0到1>将要给大家分享第十章超级实用技巧,我们精选了其中 ...
前端技巧|Chrome上4款超级实用的插件！
作为一个前端程序猿,你打开他的Chrome浏览器,在里面肯定会看到不少的插件,这些插件简直好用到不用太方便.今天小千就来给大家介绍4款超级实用的插件,不需要懂前端就能轻松使用,错过就是一个亿哦~~ 1 ...
Retrofit网络请求参数注解，@Path、@Query、@Post、Body等总结(超级实用)以及以Json格式和form-data格式提交数据
我总结的不是很全,这位博主介绍的十分详细:超级实用 https://blog.csdn.net/guohaosir/article/details/78942485 Retrofit 以Json格式提 ...
APP技巧：推荐6款超级实用的APP软件，赶快下载试试吧！
今天小编给大家6款超级实用的App软件,大家赶快下载试试吧. 01*ONE·一个推荐理由:简约的新媒体阅读平台. 生活中往往有太多的碎片化时间,比如等公交.上厕所.排队,我们可以利用这些碎片化的时间 ...
分享5个冷门而超级实用的在线网站，大家赶紧来看看吧！
今天和大家分享5个冷门而超级实用的在线网站,大家赶紧来看看吧! 1.网站配色-Adobe color 网站:https://color.adobe.com/zh/ 只需要在网上找到一张有你喜欢的颜色的 ...
软件：9款超级实用的办公软件，值得收藏！
今天给大家分享9款超级实用的办公软件,值得收藏! 一.Quicker 作为全网好评的这款国产软件,可以秒杀很多办公软件.打开它的首页就能看到很多常用的工具,包括截图.快搜.百度翻译.OCR文字识别.o ...
【开发工具】盘点IDEA那些超级实用插件
今天给大家分享IDEA那些超级实用插件,欢迎收藏! 1.日晒主题 Solarized Themes 推荐指数:☆☆☆☆☆ 推荐理由:日晒主题本身是为vim定制的.后来移植到ide 非常酷!配色非常耐看 ...
Vuex 模块化与项目实例 (2.0)
Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就 ...
cad统计多条线段总长度插件_超级实用CAD技巧应用汇总！技巧大全、插件合集、快捷键合集等...
超级实用CAD技巧应用汇总!技巧大全.插件合集.快捷键合集等各位朋友,CAD福利来啦!超级实用CAD技巧应用汇总,千万不能错过!有技巧大全.插件合集.快捷键合集.字体大全.常用图库大全.常见问题及解 ...

VueX模块化使用（超级实用）

VueX模块化使用（超级实用）相关推荐

最新文章

热门文章