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' ]) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。