面试没说清楚。这个太丢人回来整理下:

事实上在 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 的区别的更多相关文章

  1. JSF Action 与ActionListener的区别

    JSF Action 与ActionListener的区别 标签: 杂谈    事件  检验  参数  事件产生  页面跳转  Action  有 无参数,不传入当前控件,有返回值    当铵钮被单击 ...

  2. Action和Fuc的区别

    Action和Fuc的区别,参数和具体用法

  3. 072——VUE中vuex之使用mutations修改购物车仓库数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [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 ...

  5. 在Vuex使用 以及 dispatch和commit来调用mutations的区别

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...

  6. Vuex - state , getters , mutations , actions , modules 的使用

      1, 安装   vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...

  7. VUEX action解除页面耦合

    最近项目中需要用到vue+vuex来实现登出跳转功能,老大指派任务要用action解除页面耦合,刚从vue深渊晕晕乎乎爬出来的我是一脸懵逼啊...啥是解除耦合...网上vuex的资料太少了,vuex手 ...

  8. 如何在 vuex action 中获取到 vue 实例

    问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$m ...

  9. dao层、service和action的运用和区别

    DAO层叫数据访问层,全称为data access object,属于一种比较底层,比较基础的操作,对于数据库的操作,具体到对于某个表的增删改查, 也就是说某个DAO一定是和数据库的某一张表一一对应的 ...

随机推荐

  1. 第27月第17天 objc_msgSendSuper

    1.objc_msgSendSuper super 的含义,消息转发会调用 objc_msgSendSuper, 就是 去父类的方法列表中找到 initWithFrame:这个方法,然后调用,调用的主 ...

  2. vue 中跨组件的表单验证

    使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...

  3. 最全的jquery datatables api 使用详解

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  4. SpringBoot的Web配置

    重写全局配置 如果springboot提供的springmvc配置不符合要求,则可以通过一个配置类(标有@Configuration注解的类)加上@EnableWebMvc注解来实现完全自己控制的mv ...

  5. Centos7.5 VMtools的安装与卸载

    一.安装 1.自带tools:  选择VMware工具栏 => 虚拟机 => 安装VMtools 2.挂载光驱 3.tar -zxvf VMwareTools-10.3.2-9925305 ...

  6. 利用binlogserver恢复单表实验【转】

    使用场景 每次开启binlogserver 指定了mysql-bin.0000XX 后都会从该点从头进行传输一次 创建binlogserver [root@mysql-zst3 binlogserve ...

  7. Linux下自动清理超过指定大小文件

    作者:邓聪聪 扫描某个目录下的文件,发现超过指定大小即清空 1)扫描目录下的文件 2)判断文件大小 3)清空大于指定文件的内容 以byte为单位显示文件大小,然后和20M大小做对比. 20M换算成字节 ...

  8. windowns下excel2013快速生成月报表

    作者:邓聪聪 windowns下excel快速生成月报表,省去了手工复制繁琐的过程 Sub AutoCopySheets() Dim i, j As Integer i = 1 j = 11 For ...

  9. 解决64bit不能连接access的问题

    原有的程序迁移至64位,结果调用数据库时出错,原因是jet驱动没有64位的,得换用64位的驱动程序:   1. 下载运行 AccessDatabaseEngine_x64.exe (http://ww ...

  10. Navicat for MySQL连接mysql数据库时提示错误:Can't connect to MySQL server (10060)

    导致些问题可能有以下几个原因: 1.网络不通: 2.服务未启动: 3.防火墙端口未开放: a)首先确认mysql配置正确,并正确开启 service mysqld start; 设置mysql远程连接 ...