Vue组件中如何配置mapActions路径？附vue-cli store代码示例

嘿，你写的...mapActions('some/nested/module',[ 'getCountry', 'getCurrency' ])其实已经是正确的嵌套模块路径写法啦！我给你梳理下完整的配置逻辑和细节，帮你彻底搞明白怎么用：

1. 先确认你的Vuex模块配置正确 #

首先要保证你的嵌套模块开启了命名空间（这是关键！），比如你的some/nested/module模块文件：

// src/store/modules/some/nested/module.js
export default {
  namespaced: true, // *必须开启这个，否则路径映射会失效*
  actions: {
    async getCountry({ commit }) {
      // 这里写你的action逻辑，比如请求后端接口
      const res = await fetch('/api/countries');
      commit('SET_COUNTRY', res.data);
    },
    async getCurrency({ commit }) {
      const res = await fetch('/api/currencies');
      commit('SET_CURRENCY', res.data);
    }
  },
  // 对应的mutations、state也按需求定义
  mutations: {
    SET_COUNTRY(state, data) {
      state.country = data;
    },
    SET_CURRENCY(state, data) {
      state.currency = data;
    }
  },
  state: {
    country: null,
    currency: null
  }
}

然后在根store里正确注册这个嵌套模块，层级要和你用的路径对应：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import nestedModule from './modules/some/nested/module';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    some: {
      modules: {
        nested: {
          modules: {
            module: nestedModule // 这里的层级对应路径 'some/nested/module'
          }
        }
      }
    }
  }
});

2. 在Vue组件中使用mapActions #

在组件里，先引入mapActions，然后在methods里展开它就可以直接调用了：

<template>
  <div>
    <button @click="getCountry">获取国家列表</button>
    <button @click="getCurrency">获取货币列表</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    // 你原来的数组形式，直接映射模块里的action名称
    ...mapActions('some/nested/module', ['getCountry', 'getCurrency']),
    
    // 如果你想给action起别名，也可以用对象形式
    ...mapActions('some/nested/module', {
      fetchCountries: 'getCountry', // 组件内用this.fetchCountries()调用
      fetchCurrencies: 'getCurrency'
    })
  },
  mounted() {
    // 组件挂载后自动调用action
    this.getCountry();
  }
}
</script>

3. 简化写法：用createNamespacedHelpers #

如果不想每次都写长长的路径，可以用createNamespacedHelpers来生成对应模块的辅助函数：

import { createNamespacedHelpers } from 'vuex';

// 生成对应模块的mapActions、mapState等辅助函数
const { mapActions } = createNamespacedHelpers('some/nested/module');

export default {
  methods: {
    // 这里就不用再写路径了，直接映射
    ...mapActions(['getCountry', 'getCurrency'])
  }
}

常见坑点提醒 #

• 忘记开namespaced: true：这是最容易犯的错误，没开的话，Vuex会直接去根action里找方法，肯定找不到。
• 路径拼写错误：要和根store里注册的模块层级完全一致，比如模块注册的是some -> nested -> module，路径就必须是'some/nested/module'，多一个少一个层级都不行。

内容的提问来源于stack exchange，提问作者bin ye