第五讲vuex看完本文，你将能够（一）

Vuex和vue-router一样，是Vue的核心插件。是Vue的状态管理。对于组件之间的值传递，可以将这些值放入状态进行管理。1.state的用法在第二讲。我已经修改了src/store文件夹。这里我先在src/store/state.js中添加一个新的值，然后讲解vuex的用法conststate={menuType:1}exportdefaultstate这样把menuType放到vuex中，让vuex管理这个值，以及然后演示如何在组件中调用这个值：.menuType}},data(){return{}},methods:{},}如果是放在模块中的值，怎么获取呢？让我们看一下我在第2讲中创建的src/store/module/user.js文件。这是一个模块。如果你在user.js中添加了一个新值，你应该如何在组件中获取它？conststate={userName:'张三'}constgetters={}constmutations={}constactions={}exportdefault{state,getters,mutations,actions}在组件中调用这个值除了上述方式获取组件中的值外，还可以使用vuexmapSate提供的辅助函数获取值：也可以简写为：computed:{...mapState({menuType:state=>state.menuType,userName:state=>state.user.userName})},//简写为computed:{...mapState({userName:state=>state.user.userName}),...mapState(['menuType',]),},2.getter用法相当于vue中的computed属性，如menuType=1,在我自己的项目中，代表根据菜单类型，1代表ping拨号测试菜单，2代表网页拨号t估计菜单。在组件中获取这个值时，多次重复判断是没有意义的。我们可以放在getter中进行判断，找到src/store/getter。js:constgetters={menuType:state=>{if(state.menuType==1){return'pingdialtest'}else{return'webpagedialtest'}}}exportdefaultgetters然后在组件中获取此值：也可以使用vuex提供的辅助函数mapGetters获取值：computed:{...mapGetters(['menuType'])},write如何获取模块中的getter？我们在src/store/module/user.js中添加如下代码：conststate={userName:'张三'}constgetters={userName:state=>{returnstate.userName+'是管理员'}}constmutations={}constactions={}exportdefault{state,getters,mutations,actions}使用vuex辅助函数mapGetters获取模块中写的getters：3.Mutation的使用前两节主要讲如何获取vuex如果要修改vuex中的值，需要通过commit提交一个mutation来修改。找到src/store/mutations.js文件，添加如下代码：constmutations={SET_MENU_TYPE(state,params){state.menuType=params}}exportdefaultmutations然后在组件中调用这个mutation：同样，vuex也提供了辅助函数mapMutations来快速设置值：还是一样的问题，模块中的值应该怎么改什么关于提交突变？举个例子：在src/store/module/user.js中添加如下代码：conststate={userName:'张三'}constgetters={userName:state=>{returnstate.userName+'is一个管理员'}}constmutations={SET_USER_NAME(state,params){state.userName=params}}constactions={}exportdefault{state,getters,mutations,actions}然后在组件中调用写在模块中的这个mutation:4.上面提到的action用法调用mutation修改vuex中的值。这个过程是一个同步操作。如果某个值需要异步操作才能修改成功，此时需要调用action。它专门处理异步请求，然后改变vuex中的值。比如项目中的导航菜单需要后台动态返回。请求数据等操作必须是异步操作。这个时候我这里模拟一个请求。修改menuList的值conststate={menuType:1,menuList:[]}exportdefaultstate首先在src/store/mutations.js中创建一个新的mutation：constmutations={SET_MENU_TYPE(state,params){state.menuType=params},SET_MENU_LIST(state,params){state.menuList=params}}exportdefaultmutations接下来新建一个src/api/app.js文件，在里面模拟一个异步请求接口：exportconstgetMenuList=()=>{returnnewPromise((resolve,reject)=>{consterr=nullsetTimeout(()=>{if(!err){resolve({code:200,data:{menuList:[{name:'创建任务'},{name:'任务列表'}]}})}else{reject(err)}})})}找到src/store/actions.js文件并添加以下代码：import{getMenuList}from'@/api/app'constactions={updateMenuList({commit}){getMenuList().then(res=>{const{code,data:{menuList}}=rescommit('SET_MENU_LIST',menuList)}).抓住（err=>{console.log(err)})}}exportdefaultactions题外话：在调用异步函数并接收其返回值时，可以使用es7的async/await函数，写法如下：import{getMenuList}from'@/api/app'constactions={asyncupdateMenuList({commit}){try{const{code,data:{menuList}}=awaitgetMenuList()commit('SET_MENU_LIST',menuList)}catch(err){console.log(err)}}}导出默认动作，然后在组件中调用这个动作：同样，vuex也提供了一个辅助函数mapActionsto调用操作：还是一样的问题，写在module调用?找到src/api/app.js文件，添加异步接口：exportconstgetUserName=()=>{returnnewPromise((resolve,reject)=>{consterr=nullsetTimeout(()=>{if(!err){resolve({code:200,data:{name:'李四'}})}else{reject(err)}})})}然后在src/store/module/user.js文件在actions中添加一个新的方法：import{getUserName}from'@/api/app'conststate={userName:'张三'}constgetters={userName:state=>{returnstate.userName+'是管理我mber'}}constmutations={SET_USER_NAME(state,params){state.userName=params}}constactions={asyncgetUserName({commit}){try{const{code,data:{name}}=awaitgetUserName()commit('SET_USER_NAME',name)}catch(error){console.log(err)}}}exportdefault{state,getters,mutations,actions}最后在组件里调用：以上就是vuex的基本用法。通过这篇文章，相信在项目中使用vuex是没有问题的。关于vuex更高级的用法，可以在下一篇文章中学习