vuex的module模块用法示例

这篇文章主要为大家详细介绍了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'
  ])
}

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

本文来自：http://www.q1010.com/184/6589-0.html

注：关于vuex的module模块用法示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js