vuex的module模块用法

想尝试使用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'
    ])
}