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入口文件写入：
importVuefrom'vue';
importVuexfrom'vuex';
importfeedsfrom'./feeds';
importmoviesfrom'./movies';
Vue.use(Vuex);
exportdefaultnewVuex.Store({
modules:{
feeds,
movies
},
});
第二步：在每个模块内的index文件这组装所有的零件，并且输出：
importstatefrom'./state';
importmutationsfrom'./mutations';
importactionsfrom'./actions';
importgettersfrom'./getters';
exportdefault{
namespaced:true,//多出的一行
state,
mutations,
actions,
getters
};
注意上面多出的一行，我们在组件里怎么区分不同模块呢？namespaced写成true，意思就是可以用这个module名作为区分了（也就是module所在的文件夹名）
第三步：在组件里使用：
使用的时候
获取state，这里使用映射：
import{mapState,mapMutations}from"vuex";
exportdefault{
computed:{
...mapStated('模块名（嵌套层级要写清楚）',{//比如'movies/hotMovies
a:state=>state.a,
b:state=>state.b
})
},
触发actions操作：
import{mapActions}from'vuex'
methods:{
...mapActions('模块名（嵌套层级要写清楚）',[//比如'movies/getHotMovies
'foo',
'bar'
])
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志