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

事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。

  1. Vuex.Store({
  2. state,
  3. actions,
  4. mutation
  5. });
  1. vuex 真正限制你的只有 mutation 必须是同步的这一点,在vue中,
  2.  
  3. 只有mutation才能正真改变VUEX stroe中的state,

 Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作,如果有异步操作那么就用action 来提交mutation

  1. Mutation 必须是同步函数
  2. 一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:
  3.  
  4. mutations: {
  5. someMutation (state) {
  6. api.callAsyncMethod(() => {
  7. state.count++
  8. })
  9. }
  10. }
  11. 现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。
    然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,
    devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交 Mutation

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

  1. import { mapMutations } from 'vuex'
  2.  
  3. export default {
  4. // ...
  5. methods: {
  6. ...mapMutations([
  7. 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
  8.  
  9. // `mapMutations` 也支持载荷:
  10. 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
  11. ]),
  12. ...mapMutations({
  13. add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
  14. })
  15. }
  16. }

如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如.

  1. const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })

Action去comit一个mutation。它要指定去commit哪一个mutation,然后指定结束之后要做什么什么事情就要给出一个函数,所以说mutation的构成有两点名称和函数。

  1. const store = new Vuex.Store({
  2. state: {
  3. count:
  4. },
  5. mutations: {
  6. increment (state) {
  7. state.count++
  8. }
  9. },
  10. actions: {
  11. increment (context) {
  12. context.commit('increment')
  13. }
  14. }
  15. })

action 异步操作

  1. actions: {
  2. incrementAsync ({ commit }) {
  3. setTimeout(() => {
  4. commit('increment')
  5. }, )
  6. }
  7. }

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. 第26月第20天 springboot

    --------------------- 1.pom.xml中添加支持web的模块: <dependency> <groupId>org.springframework.bo ...

  2. 数据库并发控制及SQL Server的并发控制机制

    在多用户和网络环境下,数据库是一个共享资源,多个用户或应用程序同时对数据库的同一数据对象进行读写操作,这种现象称为对数据库的并发操作.显然并发操作可以充分利用系统资源,提高系统效率.虽然如此,但是如果 ...

  3. 【CentOS】JDK的安装

    FTP文件上传方式(推荐) # 解压 tar zxvf jdk-9_linux-x64_bin.tar.gz # 修改profile文件 sudo vi /etc/profile # 在文件结尾添加如 ...

  4. Shiro入门 - 通过自定义Realm连数数据库进行认证

    添加shiro-realm.ini文件 [main] #自定义Realm myRealm=test.shiro.MyRealm #将myRealm设置到securityManager,相当于Sprin ...

  5. synchronized底层实现原理&CAS操作&偏向锁、轻量级锁,重量级锁、自旋锁、自适应自旋锁、锁消除、锁粗化

    进入时:monitorenter 每个对象有一个监视器锁(monitor).当monitor被占用时就会处于锁定状态,线程执行monitorenter指令时尝试获取monitor的所有权,过程如下:1 ...

  6. AIDL通信过程中设置死亡代理

    关于AIDL的使用参考学习: https://blog.csdn.net/u011240877/article/details/72765136 https://blog.csdn.net/iromk ...

  7. 音乐app各部分笔记(二)

    7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步  progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事   svg 中 ...

  8. 配置中文分词器 IK-Analyzer-Solr7

    先下载solr7版本的ik分词器,下载地址:http://search.maven.org/#search%7Cga%7C1%7Ccom.github.magese分词器GitHub源码地址:http ...

  9. C中的malloc/free与C++中的new/delete的用法与区别

    1.先介绍malloc/free的用法: 原型函数: void *malloc(long NumBytes); 该函数分配了NumBytes个字节的内容,分配的空间是堆空间 malloc()根据用户所 ...

  10. java String、StringBuffer、StringBuild、StringTokenizer

    StringBuffer线程安全.StringBuilder线程不安全 效率: StringBuilder(线程不安全) > StringBuffer(线程安全) > String Str ...