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各部分，提高可维护性