vueX

2. Vuex：是一个集中式状态管理工具，至关于react中的 redux

   1） 主要解决的问题：大中型项目中复杂组件通信问题
   
   
     2）  vuex操做流程：
   
                dispatch                   commit

   vue组件---------------->actions------------>mutations------->state-------->vue组件更新

3）vuex的重要概念： state:要保存的状态 mutations:是最终改变状态的方法集，mutations中的代码是同步执行的 actions: 4）使用步骤： 第一步：先安装vuex npm install vuex --save 第二步：在src建立一个store目录，用来存放vuex相关文件 第三步：在store目录先建立一个index.js文件，作为vuex入口文件 第四步：在store目录的index.js中，写入下面的内容 //引入vuex，vue import Vuex from 'vuex'; import Vue from 'vue'; //让vue识别vuex Vue.use(Vuex); //存储状态 const state={ userinfo:{ username:'张三', age:20, token:'1001' } } //将vuex暴露出去 export default new Vuex.Store({ state }); 第五步：在main.js中引入store，并在new Vue中注册 //引入vuex import store from './store'; new Vue({ ....... store, ........ }); 第六步：如何获取和设置数据 获取：在对应组件的computed中处理 即： this.$store.state来获取 设置/修改数据:经过commit到mutations来修改state 如何提升vuex的使用体验： 1.优化state写法 import {matpState} from 'vuex' 

在计算属性中添加下面的内容：

computed:{
          //组件的计算属性 str() { return "hello"+this.msg }, //vuex的数据 ...mapState({ address:'address', userinfo:'userinfo' }) } } 

2.优化actions,mutations

import { mapState,mapActions,mapMutations } from 'vuex'; ...mapActions(['gomodify','aa','bb']), ...mapMutations(['setValue']), 3.隔离vuex各部分，提升可维护性