如何在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'   ]) }

看完上述内容，你们掌握如何在vuex中使用module模块的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！