vuex commit 模块_Vuex的再学习之模块化

首先我们来看一张文件结构图片

可以看到这个文件结构：

关键点：Vuex的相关文件夹store，里面有个modules/layoutModules

接下来我们看代码：

layoutModules/index.js

export default {  // namespaced 命名空间  // 标明当前模块，当你访问的时候就可以使用store/index.js里面的模块名称  namespaced: true,  // state  state: {    tabs: "23243242"  },  // mutations 同步方法  // 当然你也可以不用这么写  // 只要记住commit的第一个参数是mutation函数的函数名就可以了  // 注意的是mutations里面的函数不返回任何值  mutations: {    "TEST": (state, data) => {      state.tabs = data;    }  },  // actions 异步方法  actions: {    getTest({ commit }, data) {      commit('TEST', data);      return data;    }  },  // getters  getters: {    getTabs(state) {      return state.tabs    }  }}

然后是store/index.js

import Vue from 'vue'import Vuex from 'vuex'import layoutModules from './modules/layoutModules';Vue.use(Vuex)export default new Vuex.Store({  // 模块  modules: {    // 这里其实是这个样的 {"layoutModules":layoutModules}    // 这就解释了为什么在mapState以及其他操作时传入的第一个参数是模块的名字    // 但是，一定要记住namespaced一定要写    layoutModules   }})

最后看layout/Index.vue

<template>  <div class="layout">    <router-view/>  div>template><script>// 使用vueximport {mapActions, mapGetters, mapMutations, mapState} from 'vuex';export default {  data(){    // TODO:     return {    }  },  computed:{    // 使用state    // mapState里面有两个参数    // 模块名称和你需要的状态列表    ...mapState('layoutModules',['tabs'])  },  mounted(){    // 直接访问的方式    console.log(this.$store.state.layoutModules);    // mapState    console.log(this.tabs);    // mapActions    this.getTest('dgfgdjf').then(res=>{      console.log(res);    });    // mapGetters    console.log(this.getTabs())    // mpaMutations    console.log(this.TEST('pppppppppppp'))  },  methods:{    // 和mapState一样    ...mapActions("layoutModules",['getTest']),    ...mapGetters("layoutModules",['getTabs']),    ...mapMutations('layoutModules',["TEST"])  }};script><style lang="less" scoped>.layout {}style>