如何配置Vue mapActions

问题描述

vue-cli 商店

我的代码是这样的:...mapActions('一些/嵌套/模块',['获取国家','获取货币']),

如何在Vue组件中设置mapActions路径?

解决方案

mapActions 用于组件的 methods 属性.

//my-component.vue从 'vuex' 导入 { mapActions }导出默认{...方法: {...mapActions('命名空间/模块', ['我的行动','我的其他动作'])}}

命名空间可以由模块的文件名决定.例如，给定一个文件 - moduleA.js - getter、mutations、actions 将命名为 moduleA/someGetter, moduleA/someAction, moduleA/someMutation.

...mapActions('moduleA', ['someAction','另一个动作'])

当模块被注册时，它的所有 getter、action 和 mutation 都会根据模块注册的路径自动命名空间

另一种方法是使用 registerModule 方法，它允许动态运行时注册:

//注册一个模块 `myModule`store.registerModule('myModule', {//...})//注册一个嵌套模块 `nested/myModule`store.registerModule(['嵌套', 'myModule'], {//...})

Vuex 文档 - 命名空间

Vuex 文档 - 动态模块注册

vue-cli store

my code like this: ...mapActions('some/nested/module',[ 'getCountry', 'getCurrency' ]),

How to set up mapActions path in the Vue component?

解决方案

mapActions is used in a component's methods property.

// my-component.vue
import { mapActions } from 'vuex'

export default {
    ...
    methods: {
        ...mapActions('namespaced/module', [
            'myAction',
            'myOtherAction'
        ])
    }
}

The namespace can determined by the module's filename. For example, given a file - moduleA.js - getters, mutations, actions would be namespaced as moduleA/someGetter, moduleA/someAction, moduleA/someMutation.

...mapActions('moduleA', [
    'someAction',
    'anotherAction'
])

The other way is using the registerModule method, which allows for dynamic runtime registration:

// register a module `myModule`
store.registerModule('myModule', {
  // ...
})

// register a nested module `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

Vuex Docs - Namespacing

Vuex Docs - Dynamic Module Registration

这篇关于如何配置Vue mapActions的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！