vuex中store 的mutation
vuex中store 的mutation
1.mutation
官方解释mutation:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
官方是建议我们通过mutation来实现更改store中的state的数据,而非在组件中直接使用store.state.data=xxx来直接进行更改。通过mutation来更改数据的操作会被捕获到,而直接使用store.state.data=xxx来直接进行更改。通过mutation来更改数据的操作会被捕获到,而直接使用store.state.data=xxx来直接进行更改。通过mutation来更改数据的操作会被捕获到,而直接使用store.state.data=xxx这种方式更的数据是无法被捕获的,如果发生错误,将无法定位到是哪个组件的操作导致错误发生,所以官方说更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
图示:
上网找到 一个很不错的图
流程:
- 绕过Actions(mutation必须是同步操作,Devtools才能追踪变量)
- 用户触发事件
- 在事件处理中通过commit()提交对应的mutation
- mutation中对state进行修改
- state修改后响应系统更新视图
- 不绕过Actions(Action 可以包含任意异步操作)
- 用户触发事件
- 在事件处理中通过dispatch()提交对应的Actions
- 在Actions中通过commit()提交对应的mutation
- mutation中对state进行修改
- state修改后响应系统更新视图
解析:
当我们只有同步操作的时候,官方允许我们在组件中直接提交mutation,而不经过Actions,但是如果我们的操作包含异步操作的时候,我们必须通过Actions来异步提交mutation,从而实现异步操作,这样才能让Devtools可以捕获变量更改。
2.初次使用
const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 变更状态state.count++},incrementNum (state,num) {// 通过提交载荷传递过来的numstate.count+=num}}
})//在组件中定义一个方法通过$store.commit('increment')来进行提交
methods:{increment(){this.$store.commit('increment')},incrementNum(num){this.$store.commit('increment',num)}
}
3.提交载荷
mutations接受commit传递过来的参数,这个参数叫做payload(提交载荷),我们可以通过payload来实现数据的传递。
mutations: {increment (state, payload) {state.count += payload.amount}
}store.commit('increment', {amount: 10
})
4.对象风格的提交方式
store.commit()提供了另一种提交风格,store.commit()允许以对象的风格进行提交,这个风格跟vue很切合,对象声明形式。
store.commit({type: 'increment', //对应commit第一个参数,也就是事件类型amount: 10 //传递的参数payload
})
使用
mutations: {increment (state, payload) { //对象提交方式,payload是提交载荷state.count += payload.amount}
}
5.Mutation 需遵守 Vue 的响应规则
Vuex 的 store 中的状态是响应式的,所以Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项。
添加操作
//错误的示范
state.info['address']='北京'//正确的示范
Vue.set(state.info,'address','北京')
//vue官方说以新对象替换老对象是遵守 Vue 的响应规则
//响应系统能捕获全新的对象数据
state.info = {//一个全新的对象}
第一个示范虽然是给state中的info添加了一个key value,但是这种添加操作是绕过了vue的响应式系统的,所以vue并没有将新添加的key value追加到响应系统里面,所以视图是不会动态跟新新添加的数据。
而第二种示范,是通过vue的响应式系统进行变量的追加,所以vue能监控到变量的变化,从而对视图做出响应和跟新。
删除操作
删除操作同理
Vue.delete(state.info,'address')
6.用常量替代Mutation事件类型
从上面的代码可以看出,我在使用store.commit的时候后面都是通过字符串的形式来指定commit的mutation。而官方建议是将这种mutation 事件类型进行一个抽离,将这些mutation的名字定义到一个专门保存的单独文件种,这样做抽离,使得整个APP的mutatio易于管理,也使得项目结构清晰。
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然:
官方建议的操作如下:
先将创建一个mutation-types.js,里面存储定义的mutation 事件类型
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
//定义什么mutation,先将事件类型(名字)写这里
使用的时候
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'const store = new Vuex.Store({state: { ... },mutations: {/*官方是用这种风格来命名的:[SOME_MUTATION] (state) {} ---等价转变--->SOME_MUTATION(state) {}*/// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名[SOME_MUTATION] (state) {// mutate state}}
})//其他组件commit时
import { SOME_MUTATION } from './mutation-types'...
store.commit(SOME_MUTATION)
7.Mutation 必须是同步函数
官方是这样解释的:
一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:
mutations: {someMutation (state) {api.callAsyncMethod(() => {state.count++})}
}
现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
所以我们为了能够实现异步操作,我们需要借助Actions来实现,在Actions通过异步提交 mutation从而实现异步操作,Action 可以包含任意异步操作,Action 提交的是 mutation,而不是直接变更状态。
vuex中store 的mutation相关推荐
- vuex结合php,vuex中store的使用介绍(附实例)
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
- vuex中actions配合mutation处理axios请求
众所周知,vuex中actions一般用来做异步操作,像数据请求,定时器,都不应该直接写在mutation,像我就犯了这个错 Vuex mutations: {PLAY(state, obj) {co ...
- 使用vuejs 2.x (不是nuxt) 做个demo: 使用 vuex, router ( store, action , mutation)
使用命令创建项目 根据图片提示选择需要的内容,选择vuex router 按空格进行多选 vue create vuex1 cd vuex1 yarn serve 假设,我们有两个页面: " ...
- 解决vuex中store保存数据,刷新页面会清空得问题
1.在App.vue下加入 mounted() {window.addEventListener("unload", this.saveState);},methods: {sav ...
- Vuex中mutations的用法
Vuex中mutations的用法 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是 ...
- 操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers
上一篇博客有提到直接改变vuex中的值会报错,现在详细记录一下这个错误,首先看一下错误 这是因为直接操作vuex中的数据没有通过mutations去更新state而报的错误,如果在一个组件中初始化数据 ...
- Vuex的store中的Module
Vuex的store中的Module 1.单一状态树: 什么是单一状态树呢?单一状态树可以简单得理解成整个vuex中只有一个store对象. 这是官方对单一状态树的解释: Vuex 使用单一状态树-- ...
- vue提交mutation_为什么Vuex中必须要通过commit提交mutation?
为什么不能直接调用mutation方法,而是必须得通过commit来提交mutation呢? 谢邀! 网上也有很多人问这个问题.但是这个问题要问作者为什么这么设计? 官方解释道: 更改 Vuex 的 ...
- vuex中mutation和action的详细区别
一.vuex中mutation和action的详细区别 const store = new Vuex.Store({state: {count: 0},mutations: {increment (s ...
最新文章
- 命令行创建React项目
- ae saber插件_【AE插件】 用于做动画制作/设计的五个免费插件 非常好用
- DPM(Deformable Parts Model)--原理(一)
- 让nginx支持thinkphp rewrite模式
- 前端学习(1765):前端调试值之性能分析的方法三
- python分类算法的应用_Python使用sklearn库实现的各种分类算法简单应用小结
- 大鱼风控笔记 3:量化风控政策的关注点
- 如何设置固定宽度 td ?
- 为什么最好不用SSL免费证书? 免费ssl证书有什么不好?
- [ScyllaHide] 05 ScyllaHide的Hook原理
- 七大工业机器人仿真软件,你知道哪些呢?
- ml sparksql 数据比较_Spark 及其上层应用 SparkSQL(六)
- 一款好的BI产品需要具备什么样的特点?
- android黑域系统文件,优雅地使用安卓手机,黑域免root使用教程
- 笔记本gtx1650最好用驱动_各型号笔记本显卡定位
- office Word中手动添加MathType插件
- 剑指offer算法题028:数组中出现次数超过一半的数字
- 入门:链表的基本操作
- jQuery实现常见的轮播图效果
- 利用QQ文件中转站给多个好友或群友传送文件