vuex action 与mutations 的区别
面试没说清楚。这个太丢人回来整理下:
事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。
Vuex.Store({
state,
actions,
mutation
});
vuex 真正限制你的只有 mutation 必须是同步的这一点,在vue中, 只有mutation才能正真改变VUEX stroe中的state,
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作,如果有异步操作那么就用action 来提交mutation
Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子: mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。
然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,
devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx')
提交 mutation,或者使用 mapMutations
辅助函数将组件中的 methods 映射为 store.commit
调用(需要在根节点注入 store
)。
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')`
})
}
}
如果想要获取对应的状态你就可以直接使用this.$store.state
获取,当然,也可以利用vuex
提供的mapState
辅助函数将state
映射到计算属性中去,如.
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
Action去comit一个mutation。它要指定去commit哪一个mutation,然后指定结束之后要做什么什么事情就要给出一个函数,所以说mutation的构成有两点名称和函数。
const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
action 异步操作
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, )
}
}
vuex action 与mutations 的区别的更多相关文章
- JSF Action 与ActionListener的区别
JSF Action 与ActionListener的区别 标签: 杂谈 事件 检验 参数 事件产生 页面跳转 Action 有 无参数,不传入当前控件,有返回值 当铵钮被单击 ...
- Action和Fuc的区别
Action和Fuc的区别,参数和具体用法
- 072——VUE中vuex之使用mutations修改购物车仓库数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...
- 在Vuex使用 以及 dispatch和commit来调用mutations的区别
main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...
- Vuex - state , getters , mutations , actions , modules 的使用
1, 安装 vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...
- VUEX action解除页面耦合
最近项目中需要用到vue+vuex来实现登出跳转功能,老大指派任务要用action解除页面耦合,刚从vue深渊晕晕乎乎爬出来的我是一脸懵逼啊...啥是解除耦合...网上vuex的资料太少了,vuex手 ...
- 如何在 vuex action 中获取到 vue 实例
问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$m ...
- dao层、service和action的运用和区别
DAO层叫数据访问层,全称为data access object,属于一种比较底层,比较基础的操作,对于数据库的操作,具体到对于某个表的增删改查, 也就是说某个DAO一定是和数据库的某一张表一一对应的 ...
随机推荐
- c文件操作
文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件, 例如源程序文件.目标文件.可执行文件.库文件 (头文件)等. ...
- cpp 标准库
源:http://bbs.csdn.net/topics/300040713 C++标准库的所有头文件都没有扩展名.C++标准库的内容总共在50个标准头文件中定义,其中18个提供了C库的功能.< ...
- json数据的处理和转化(loads/load/dump/dumps)
import requests import json url='https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%8 ...
- 将sublime添加到鼠标右键
1.win+R 输入regedit ,打开注册表. 2.找到HKEY_CLASSES_ROOT/*/shell目录,在此目录下 ①新建项,命名为“sublime Text”(也可以是其他名字),双击右 ...
- 表单相关标签之textarea,select
textarea <textarea rows="3" cols="20"> 在w3school,你可以找到你所需要的所有的网站建设教程. < ...
- 算法-链的操作(一)-合并两个排序的链接(no.25)
合并两个排序的链接(no.25) 把下面连个排好序的链,从小到大排序链接. list1 : 1 -> 6 -> 8 list2 : 2-> 5 -> 9 def merge(h ...
- JAVA知识笔记
1.对于volatile修饰的变量,jvm虚拟机只是保证从主内存加载到线程工作内存的值是最新的.更详细介绍参考http://blog.csdn.net/libing13820393394/articl ...
- SpringSecurity实现短信验证码登录(Token)
- 【转】浅析Python中的struct模块
[转]浅析Python中的struct模块 最近在学习python网络编程这一块,在写简单的socket通信代码时,遇到了struct这个模块的使用,当时不太清楚这到底有和作用,后来查阅了相关资料大概 ...
- 判断鼠标进入容器的方向小Demo
参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...