真正掌握vuex的使用方法（七）----完结

今天是关于vuex的最后一篇文章了！怎么说呢？且行且珍惜吧!！认真尝试每一行代码！

之前的文章当中，我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大，共享的状态越来越多，越来越复杂！在这个时候我们需要将状态根据功能来对其进行模块化，同时也是为了便于将来的维护，所以分开写会更好一些。
今天我们主要来学习一下module:状态管理器的模块化操作。
假如项目中包括两个模块，分别为广告模块与用户模块。
首先在src文件夹下新建一个vuex文件夹，然后在该文件夹下新建一个index.js文件用于生成Store对象。然后在vuex文件夹下新建adv与user文件夹，最后分别在这两个文件夹内创建一个index.js文件。如图

vuex/adv/index.js文件存放的是广告模块的内容。代码为：

//在该文件中可以单独设置adv相关的状态
const state={
    //定义状态数据userName
    advName:"我是一个通栏广告！"
}
export default {
    state,//将state进行输出
}

vuex/user/index.js文件存放的是用户模块内容。代码为：

//在该文件中可以单独设置user相关的状态
const state={
    //定义状态数据userName
    userName:"张培跃"
}
export default {
    state,//将state进行输出
}

在vuex/index.js中引入刚才定义的两个模块，并通过modules导出：

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
import axios from "axios";
import adv from "./adv";//引入vuex的adv模块
import user from "./user";//引入vuex的user模块
Vue.use(Vuex);//使用vuex
export default new Vuex.Store({//暴露Store对象
    modules:{
 adv,//adv状态
 user//user状态
    }
})

配置main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'//导入vuex,index.js为默认选 中文件夹，在此可以省略
Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,//添加store
    components: { App },
    template: ''
})

在模板中使用的格式为$store.state.模块名.state属性名：

   
advName:{{$store.state.adv.advName}}
   
userName:{{$store.state.user.userName}}

输出的格式可以简化，将computed（计算属性）调整下：

export default {
    name: 'App',
    computed:{
 advName(){
     return this.$store.state.adv.advName;
 },
 userName(){
     return this.$store.state.user.userName;
 }
    }
}

然后模块中直接调用计算属性即可：

   
advName:{{advName}}
   
userName:{{userName}}

或者通过mapState来对computed进行设置,首先引入mapState:

import {mapState} from "vuex";

然后修改computed:

export default {
    name: 'App',
    computed:{
 ...mapState({
     advName(state){
  console.log(state);
  return state.adv.advName;
     },
     userName(state){
  return state.user.userName;
     }
 })
    }
}

最后在页面中渲染的内容为：

advName:我是一个通栏广告！
userName:张培跃

######接下来，我们来看一下如何通过mutation改变状态值。
首先在adv/index.js中添加一个mutation方法SET_ADVNAME用于改变advName状态:

const mutations={
    //state为当前状态对象，v为按收的值
    SET_ADVNAME(state,v){
 state.advName=v;
    }
}

在模板中调用，直接通过$store.commit(‘方法名’,传递参数)。

   
advName:{{advName}}
   
userName:{{userName}}
   

现在，在user/index中也添加一个mutation方法SET_ADVNAME，这次改变的是userName状态:

const mutations={
    //state为当前状态对象，v为按收的值
    SET_ADVNAME(state,v){
 state.userName=v;
    }
}

最后点击按钮，你会发现两个模块中的SET_ADVNAME均被触发了！这说明mutation是不区分模块的。如果在不同模块中的mutation出现同名的方法，都会执行。

#####关于vuex共七篇文章，已完结！希望可以对各位学习vuex有所帮助！
######作业：

• 尝试getters与actions的定义与调取.
• 尝试getters与actions出现同名，结果会怎样？（尝试一下，估计和你想的不一样哦）