想尝试使用vuex的module来进行操作，看了一些资料，我简单进行了一个简化

目录结构：

store│ index.js│ ├─feeds│ actions.js│ getters.js│ index.js│ mutation-type.js│ mutations.js│ state.js│ └─movies actions.js getters.js index.js mutation-type.js mutations.js state.js

这里是两个模块feeds和movies

第一步：在store文件夹下的index.js入口文件写入：

import Vue from 'vue';import Vuex from 'vuex';import feeds from './feeds';import movies from './movies';Vue.use(Vuex);export default new Vuex.Store({ modules: { feeds, movies },});

第二步：在每个模块内的index文件这组装所有的零件，并且输出：

import state from './state';import mutations from './mutations';import actions from './actions';import getters from './getters';export default { namespaced: true, //多出的一行 state, mutations, actions, getters};

注意上面多出的一行，我们在组件里怎么区分不同模块呢？namespaced写成true，意思就是可以用这个module名作为区分了（也就是module所在的文件夹名）

第三步：在组件里使用：

使用的时候

获取state，这里使用映射：

import { mapState, mapMutations } from "vuex";export default {computed:{ ...mapStated('模块名（嵌套层级要写清楚）',{ //比如'movies/hotMovies a:state=>state.a, b:state=>state.b })},

触发actions操作：

import { mapActions } from 'vuex'methods:{ ...mapActions('模块名（嵌套层级要写清楚）',[ //比如'movies/getHotMovies 'foo', 'bar' ])}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。