vueX状态的管理

适用初级人员预览

vuex是vue技术栈中中的一员，负责组件的状态的管理（组件状态就是组件中的数据）
vuex的优点：基于vue开发项目的时候肯定会遇到组件之间的传值，在组件传值可以用props父组件向子组件传递数据，自定义事件子组件向父组件传递数据，这样可以实现传递数据，这两种方式如果遇到大项目用这两种方式进行传递数据就比较繁琐，而vuex属于专门负责管理组件的数据，就会方便很多，直接将数据放入vuex中需要的时候直接调用出来即可.
vueX快速入门示例

安装vuex
npm i vuex

接下来创建一个store（store/index.js）文件初始化仓库

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

Vue.use(Vuex);在vue上注册vuex

export default new Vuex.Store({//基于store这个方法导出vuex创建的实例
    // 仓库的状态（数据）
    state : {},
    // 类似于计算属性，对仓库的数据做二次处理
    getters : {},
    // 同步修改仓库数据
    mutations : {},
    // 异步修改仓库数据
    actions : {}
});

在创建仓库完成后如果想获取数据就可以在state和getters当中提取数据
他们的区别在于getters中的数据是将state中的数据进行二次处理的

// 仓库的状态
state : {
  stu : [
    {name : '大雄',age : 18},
    {name : '叮当猫',age : 19},
    count:"0"
  ]
},
  // 类似于计算属性，对仓库的数据做二次处理
  getters : {
    stu2(state){//接受的数据是state中的数据
      return state.stu.map(item=>{
        return {
          name :'$'+item.name + '$',
          age : item.age * 2
        }
      })
    }
  },

  回头在组件中，就可以通过 this.$store 拿到整个仓库，从而获取获取数据，代码如下：

  computed : {//计算属性
  stuList(){
    return this.$store.getters.stu2;
    
    ```
**修改仓库的数据** 
首先需要在 store/index.js 定义 mutations 方法，因为 mutations 方法是唯一能够修改仓库数据的方法
/ 同步修改仓库数据
// 通过 mutations，就可以修改仓库的数据，mutations 里面书写一个一个的方法
// 回头就在组件里面来 commit 这些方法
// mutations 是唯一能够修改仓库数据的方法
mutations : {
  // 增加
  addCount(state, payload){//state组件的数据   payload组件传过来的值
    state.count += payload;
  }
},
当我们在组件里面想要修改仓库的数据的时候，直接调用 mutations 里面的方法即可。
addNumHandle(){
  this.$store.commit('addCount',~~this.selectNum); // 调用 mutations 里面的方法
}
当我们在 mutations 里面混用异步代码的时候，会导致调试很困难，所以 vuex 提供 actions，专门来处理异步操作，处理完成后，再调用mutations 里面的方法。示例如下：


// 异步修改仓库数据
// actions 虽然是异步修改仓库数据，但是其实也是调用的 mutations 的方法
// 既然是调用 mutations，所以和组件一样，也是通过 commit 来触发 mutations 的方法
actions : {
  addCountAsync(context, payload){
    setTimeout(()=>{
      // 下面的代码等价于
      // this.$store.commit('addCount',~~this.selectNum);
      context.commit('addCount', payload)
    },4000)
  }
}   
接下来在组件里面，通过 dispatch 方法来分发一个 action。代码如下：
this.$store.dispatch('addCountAsync',~~this.selectNum);






**modules**

目前为止，我们的仓库状态都是在 store/index.js 里面管理的。



如果是大型应用，那么仓库的状态就会变得非常的庞大，用一个文件来管理不方便我们的维护。



例如，现在我们在 store 目录下面新建一个 modules 目录，用于存放拆分的模块
// /store/modules/home.js
export default {
    namespace : true, // 命名空间
    state :{
        stuList : [
            {name : '叮当猫',age:"18"
          
        ]
    },
    getters : {},
    mutations : {},
    actions : {}
}
// /store/modules/about.js
export default {
    namespace : true, // 命名空间
    state :{
        stuList : [
          {name : '叮当猫',age:"18"
        ]
    },
    getters : {},
    mutations : {},
    actions : {}
}
接下来，需要在 store/index.js 里面注册这两个模块，如下：
export default new Vuex.Store({
    // 仓库状态拆分模块
    modules : {
        home,
        about
    }
});
最后，在组件里面，通过模块形式来访问状态，如下：
computed : {
   stuList1(){
     return this.$store.state.home.stuList 
   },
     stuList2(){
       return this.$store.state.about.stuList 
     },
 },