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一定是和数据库的某一张表一一对应的 ...
随机推荐
- 第27月第17天 objc_msgSendSuper
1.objc_msgSendSuper super 的含义,消息转发会调用 objc_msgSendSuper, 就是 去父类的方法列表中找到 initWithFrame:这个方法,然后调用,调用的主 ...
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- 最全的jquery datatables api 使用详解
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
- SpringBoot的Web配置
重写全局配置 如果springboot提供的springmvc配置不符合要求,则可以通过一个配置类(标有@Configuration注解的类)加上@EnableWebMvc注解来实现完全自己控制的mv ...
- Centos7.5 VMtools的安装与卸载
一.安装 1.自带tools: 选择VMware工具栏 => 虚拟机 => 安装VMtools 2.挂载光驱 3.tar -zxvf VMwareTools-10.3.2-9925305 ...
- 利用binlogserver恢复单表实验【转】
使用场景 每次开启binlogserver 指定了mysql-bin.0000XX 后都会从该点从头进行传输一次 创建binlogserver [root@mysql-zst3 binlogserve ...
- Linux下自动清理超过指定大小文件
作者:邓聪聪 扫描某个目录下的文件,发现超过指定大小即清空 1)扫描目录下的文件 2)判断文件大小 3)清空大于指定文件的内容 以byte为单位显示文件大小,然后和20M大小做对比. 20M换算成字节 ...
- windowns下excel2013快速生成月报表
作者:邓聪聪 windowns下excel快速生成月报表,省去了手工复制繁琐的过程 Sub AutoCopySheets() Dim i, j As Integer i = 1 j = 11 For ...
- 解决64bit不能连接access的问题
原有的程序迁移至64位,结果调用数据库时出错,原因是jet驱动没有64位的,得换用64位的驱动程序: 1. 下载运行 AccessDatabaseEngine_x64.exe (http://ww ...
- Navicat for MySQL连接mysql数据库时提示错误:Can't connect to MySQL server (10060)
导致些问题可能有以下几个原因: 1.网络不通: 2.服务未启动: 3.防火墙端口未开放: a)首先确认mysql配置正确,并正确开启 service mysqld start; 设置mysql远程连接 ...