这篇文章主要介绍了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模块用法示例的详细内容，更多请关注0133技术站其它相关文章！
