本文适合对Vuex有过中度使用--至少在一个项目使用vuex以及相关辅助函数的朋友阅读.

  • 关于Vuex(太长,可以不看)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以上就是官网的解释,简单来说,就是简化为了高阶组件传参,统一管理各个组件都需要共享的一个数据状态,如果组件间不是父子组件,那么传参起来可能就很麻烦,当然通过其他手段也能实现,但目前来说都比较繁琐,这时候,就需要用到我们的数据状态管理了。

数据更改流程

我就直接放官网一张图说明好了:

意思就是我们把需要管理的数据放在 state 中,从 state 中取出数据渲染到页面中,然后用户在页面层发起更改数据,数据更改要通过mutation 去改,异步操作还需要用 actions 去触发 mutation,整个过程如下图:

说到这里,差不多就介绍完概念了,下面我们看它的使用新姿势。

因为是给已经有 vuex 使用经验的小伙伴分享,我就直接上代码了。

最基本的打开方式是这样的

const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {context.commit('increment')}}
})

用辅助函数更改数据是这样的

import { mapMutations } from 'vuex'
export default {methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷:'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`]),...mapMutations({add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`})}
}

以上不论哪种方式,他们需要这样——写一堆 mutation

export const mutations = {changeIsPhone(state, isPhone) {state.isPhone = isPhone;},changeMenuIndex(state, menuIndex) {state.menuIndex = menuIndex;},changeTabbarShow(state, show) {state.tabbarShow = show;},changTopbarShow(state, show) {state.topbarShow = show;},setPaintingInfo(state, paintingInfo) {state.paintingInfo = paintingInfo;},setArticleCategory(state, category) {state.articleCategory = category;},changeUser(state, user) {state.user = user;},changeIsLogin(state, isLogin) {state.isLogin = isLogin;},changeLoginDialogShow(state, show) {state.loginDialogShow = show;},changeLoginDialogType(state, type) {state.loginDialogType = type;}
};

经过经验累积可发现,我们的 mutation大多数都只是做简单的数据更新,如果其中有复杂的逻辑变化,一般都是交给 actions 去做了,我们可以在 actions 里面做异步请求,数据处理,最后将处理好的数据通过 mutation 更改,那既然 mutation 形为这么一致,我们为什么不把他封装起来了呢?

说做就做。

我们先给他封装 store 对象封装一个魔法方法,主要看__s这个魔法方法。

export type MagicMethod = {// 触发 mutation__s?: (type: string, msg: string) => any;// 触发 actions__d?: (type: string, msg: string) => any;// 触发 getter__g?: (type: string, msg: string) => any;commit: Commit;dispatch: Dispatch;getters: any;
}const store: Store<any> & MagicMethod= = new Vuex.Store({strict: true,state,mutations,actions,getters,modules,plugins: [// 持久化插件VuexPersistedState({paths: ['app.language']})]
})// 这是重点!重点!重点!
@param type - 需要更改的数据名,模块名以.分隔,如 user 模块下的info 属性,type 应为 user.info
store.__s = (type, msg) => {let _state = store.stateif (!type) return store.state// 判断是根 state 还是 module 下的if (type.indexOf('.') === -1) {if (msg !== undefined) {store.commit({type: '__set',key: type,val: msg,root: true})return _state} else {return _state[type]}}const _path = type.split('.')for (let i = 0; i < _path.length; i++) {if (_state[_path[i]] !== undefined) {_state = _state[_path[i]]} else {_state = undefined}}if (msg !== undefined && _path.length === 2) {store.commit({type: _path[0] + '/__set',key: _path[1],val: msg})}return _state
}

我们的 mutation 文件,一个方法就够了,通过 key 和 value 去更改 数据,mutation.js内容如下。

export default {__set(state, msg) {state[msg.key] = msg.val}
}

然后在任何一个页面,我们都不用引入 mapMutaion,mapActions 这些辅助函数,更改state 直接使用如下方式

confirm() {// 更改根 state 下的 coinType属性this.$store.__s('coinType', this.d_selectType)// 更改根 state 下的 coinInfo属性this.$store.__s('coinInfo', coinbook[coinName])if (Reflect.has(coinbook[coinName].bip, '49')) {// 更改根 state 下的 coinProtocol属性this.$store.__s('coinProtocol', 49)} else {// 更改根 state 下的 coinProtocol属性this.$store.__s('coinProtocol', 44)}// 更改dialog 模块下的 chooseType属性this.$store.__s('dialog.chooseType', false)// 更改usb 模块下的 xpub 属性this.$store.__s('usb.xpub', '')
}

读取的话还是和原来一样,使用 compute读取

computed: {addressType:(vm) => vm.$store.__s('addressType'),coinProtocol: (vm) => vm.$store.__s('coinProtocol')
}

当然如果你嫌弃这样麻烦,还是可以和原来的辅助函数共存的,没有一点侵入性。

如果你也觉得这个方法有用,赶快学起来吧。 经实验证明,有大量 mutation 的情况下,真的能节约不少时间呢。

vuex commit 模块_分享一个Vuex的使用的新姿势相关推荐

  1. vuex commit 模块_长篇连载:Vuex源码学习(二)脉络梳理

    前车之鉴 有了vue-router源码学习的经验,每次看认真钻研源代码的时候都会抽出一小段时间来大体浏览一遍源代码.大体了解这个源代码的脉络,每个阶段做了什么,文件目录的划分.下面我来带大家梳理一下V ...

  2. vuex commit 模块_一分钟上手Vuex

    Vuex介绍 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官 ...

  3. vuex commit 模块_Vuex详细介绍

    1. 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.这是官网的说法,其实很简单:就是一个加强版的data! 在单页应用中会有一个data函数,里面就存放了当前页面的一 ...

  4. mysql数据库新建一个递增的_分享一个mysql实验—基于数据库事务隔离级别RR及RC的测试...

    概述 今天主要分享一个最近做的实验,主要是测试mysql数据库在RR和RC不同事务隔离级别下的表现. MySQL使用可重复读来作为默认隔离级别的主要原因是语句级的Binlog.RR能提供SQL语句的写 ...

  5. mac redis 客户端_分享一个免费好用的Redis桌面客户端

    今天波波为做开发的朋友们分享一个免费好用的Redis桌面客户端.这个工具纯属机缘巧合下发现的,前几天波波在开发一个物联网平台,硬件通信部分用了Workman Gateway来负责通信和消息推送,结果因 ...

  6. vc++6.0获取磁盘基本信息_分享一个实用脚本--一键获取linux内存、cpu、磁盘IO等信息...

    概述 今天主要分享一个shell脚本,用来获取linux系统CPU.内存.磁盘IO等信息. 脚本 #!/bin/bash # 获取要监控的本地服务器IP地址 IP=`ifconfig | grep i ...

  7. 编写一个弹出式菜单的shell程序_分享一个有趣的shell脚本--实现抓阄程序

    概述 今天主要分享一个有趣的shell脚本,用来实现抓阄,平时就不用剪刀石头布了. 需求 使用shell编写一个抓阄的程序: 1.执行脚本后,输入英文名字全拼,产生随机数01-99之间的数字,数字越大 ...

  8. 2个表 遍历 组合_分享一个python脚本--数字随机组合有多少

    概述 今天主要分享一个python实例,大家有兴趣也可以做一下~ 需求 有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 方法一:遍历全部可能,把有重复的剃掉. tot ...

  9. python脚本视频_分享一个Python下载视频脚本

    分享一个Python下载视频脚本(通过flvcd.com代理的) 代码如下: #!/usr/local/bin/python #test for command line parameter(s) # ...

最新文章

  1. C语言里面%2d 意思
  2. 热点:3个故事概览突飞猛进的肠道病毒组研究
  3. java的标量和聚合量_第5节:Java基础 - 必知必会(下)
  4. python用pandas提取行列_python- pandas 不删除符合条件的行和列
  5. JQuery 数组按指定长度分组
  6. 新版本ISR 为啥 移除replica.lag.max.messages这个参数
  7. 平板涂色(信息学奥赛一本通-T1445)
  8. SQL存储过程:取出自定义条数的数据
  9. Elasticsearch-PHP requires cURL, or a custom HTTP handler.
  10. 24点游戏java代码 中国开源社区_编程之美 1.16 24点游戏
  11. OFFICE技术讲座:WP/SS文字渲染不开启的条件
  12. 关于用C#调用C++的dll中的函数,获取字符串返回值的一些细节
  13. Uva 10247 (组合计数)
  14. 数字字符串转为数字 C语言实现
  15. python小白系列2
  16. element-ui的走马灯详解
  17. Catalan卡特兰数
  18. Verse on Premises 1.0.5IF1发布
  19. Composer 使用简单教程
  20. 计算机在模具设计中的应用课程设计,计算机技术在模具工艺课教学中的应用

热门文章

  1. 我的 Hive 为什么跑不起来/跑得慢?看看是不是少了这几行代码?
  2. 企业管理系统原型、HRM、工作报告统计、0A、商机、合同、客户管理、产品管理、企业oa、行政办公系统、数据报表、销售分析、客户分析、产品管理、人力资源管理系统、crm、axure原型、rp源文件
  3. 美丽的字符正方形FINAL
  4. IntelliJ 一键添加双引号
  5. Linux学习之chage命令
  6. Shell脚本常用判断
  7. JVM如何判断类相同
  8. JDK5.0的11个主要新特征
  9. SpringBoot配置swagger2(亲测有效,如果没有配置成功,欢迎在下方留言)
  10. Likecloud-吃、吃、吃