vue.js - vuex中mapActions以数组形式映射模块中的方法，该如何使用

问题描述

问 题

第一个问题：
如果有以下的定义方式：

methods: {
  ...mapActions([
    'foo',
    'bar'
  ])
}

则相当于

methods: {
  foo(...args) {
    return this.$store.dispatch.apply(this.$store, ['foo'].concat(args))
  }
  bar(...args) {
    return this.$store.dispatch.apply(this.$store, ['bar'].concat(args))
  }
}

这个是参考了这篇文章的，那这种定义方式该如何传入组件内部的data呢？

第二个问题：
官网的vuex的例子中，有这种写法：

methods: {
  ...mapActions([
    'some/nested/module/foo',
    'some/nested/module/bar'
  ])
}

如果相对于问题一，是相当于什么形式的调用？以及这样调用的话，store中的结构又是怎么样的？

解决方案

形式一样的, 你可能被这两个变量的长度给迷惑到了。 它只不过是把vuex的Mutations转换一下。

如下:

methods: {
  'some/nested/module/foo': (val) {
    return this.$store.dispatch('some/nested/module/foo', val))
  }
}

但这个Mutations这么长, 一般不会这样去转换,会加个别名

methods: {
  ...mapActions({
    foo: 'some/nested/module/foo',
    bar: 'some/nested/module/bar'
  })
}

//相当于下面的写法

methods: {
  foo(val){
    return this.$store.dispatch('some/nested/module/foo', val))
  }
   //bar 省略....
  })
}

这篇关于vue.js - vuex中mapActions以数组形式映射模块中的方法，该如何使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！