首页 > 编程 > JavaScript > 正文

vuex的module模块用法示例

2019-11-19 12:32:01
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表