04 Vuex-基础知识点

Vue-x

一、Vue-x概述

Vue-x是专为Vue.js应用程序开发的状态管理模式，提供一个在多个组件间共享状态的插件。它的作用是将多个组件共享的变量全部存储在一个对象里，对象是存放在顶层的Vue实例中，可供其他组件进行使用。

二、Vue-x状态管理

2.1 单页面状态管理

• State 驱动应用的数据源
• View 以声明方式将 state 映射到视图
• Actions 响应在 view 上的用户输入导致的状态变化
  

2.2 多也面状态管理

• Vue Components 页面组件里发布行为
• Actions 处理异步操作，向后端发送网络请求
• Mutations 处理同步操作，修改数据源数据
• State 驱动应用的数据源
• Backend API 后端API
• Devtools Vue的官方调试工具，记录数据修改状态
  

三、Vue-x核心内容

3.1 State内容

3.1.1 State的单一状态树概念

单一状态树，也称单一数据源(Single Source of Truth)。采用一个Store对象来管理应用层的全部状态，这样以便对数据的管理与维护。

3.2 Getter内容

3.2.1 getters的使用

对state的数据进行加工处理

• store/index.js

  const store = new Vuex.Store({
     state:{
     	sum:10,
     }  
     getters:{
        // 返回sum数据取平方后的值
     	powerSum(state){
       		return state.sum * state.sum;
     	} 
     }
   }); 

• pages/demo.vue

<template>
<!-- 引用getters -->
<p>{{$store.getters.powerSum}}</p>
</template>

3.3 Mutation内容

3.3.1 mutations状态更新

mutations是用来更新store状态的唯一方式

• store/index.js

  const store = new Vuex.Store({
     state:{
       number:10,
     }
     mutations:{
       // 不带参数方法:
       addNumDefault(state){
         state.number++;
       }  
       // 带参数方法:
       addNumParameter(state,para){
         state.number += para;
       }
     }   
   }); 

• pages/demo.vue

<template>
  <div class="container">
     <!-- 绑定不带参数函数 -->
    <button @click="incremenDefault"><button>
     <!-- 绑定带参数函数 -->
    <button @click="incremenParameter(10)"><button>
  </div>
</template>

<script>
  export default {
    name:'demo',
    methods:{
      // 无参数
      incrementDefault(){
         this.$store.commit('addNumDefault');
      }
      // 有参数
      incrementParameter(){
      	 this.$store.commit('addNumParameter',para);
  	  }
    }
  }
</script>

通过commit调用store文件里mutations里方法来修改的状态

3.3.2 mutations提交方式

1. 普通方式提交

• pages/demo.vue

<script>
  export default {
    name:'demo',
    methods:{
      incrementParameter(para){
      	 this.$store.commit('addNumParameter',para);
  	  }
    }
  }
</script>

• store/index.js

  const store = new Vuex.Store({
     state:{number:10}  
       addNumParameter(state,para){
         state.number += para;
       }
     }   
   }); 

2. 类型方式提交

• pages/demo.vue

<script>
  export default {
    name:'demo',
    methods:{
      incrementParameter(para){
      	 this.$store.commit({
           type:'addNumParameter',
           para
         });
  	  }
    }
  }
</script>

• store/index.js

  const store = new Vuex.Store({
     state:{number:10}  
       addNumParameter(state,payload){
         state.number += payload.para;
       }
     }   
   }); 

3.3.3 mutations响应规则

Vuex的store中的state是响应式，当state中数据发生变化时Vue组件会自动更新，因此mutatons面对state的响应式有需要遵循的规则。

1. state的变量或者对象等需要初始化完善，当采用非响应式的方式给已定义的变量或对象等添加属性，该属性不会进行响应式的渲染在组件中
2. 给state变量或者对象等采用响应式的方式添加删除属性使用以下方式:
   1. Vue.(state.numObj,‘newPara’,100) 添加属性
   2. Vue.delete(state.numObj,‘oldPara’) 删除属性
3. Mutation中的方法必须是同步操作，若mutatios中定义的方法采用异步操作，devtool调试工具无法及时的捕捉与跟踪该方法处理后数据的响应式状态。

3.4 Action内容

3.4.1 actions的使用

Vuex处理一些异步操作时会借助Action来完成这项任务。

• pages/demo.vue

<template>
  <button @click="asynChangeInfo">异步修改信息</button>
</template>

<script>
  export default {
    name:'demo',
    methods:{
      asynChangeInfo(){
         // 1.调用actions的方法
      	 this.$store.dispatch('actiAsynChangeInfo');
  	  }
    }
  }
</script>

• store/index.js

<script>
   const store = new Vuex.Store({
     state:{
       userInfo:{name:'Tom',age:20,sex:'男'},
     }
     mutations:{
       mutaAsynChangeInfo(){
         // 3.修改信息
         state.userInfo.age = 30; 
       }
     }
     actions:{
       actiAsynChangeInfo(context){
         setTimeout(() => {
           // 2.调用mutations里的方法
           context.commit('mutaAsynChangeInfo')  
         },1000);   
       }
     }
   }); 
</script>

3.5 Module内容

3.5.1 modules的使用

Vuex使用单一状态树的模式来管理公共数据，但遇到复杂与庞大的数据时，需要采用Module把store进行分割为不同的模块，方便对数据进行有层次的管理。

• store/index.js

  const module1 = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
  }
   const module2 = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
  }


  const store = new Vuex.Store({
     state:{}
     mutations:{},
     actions:{},
     getters:{},
     modules{
       a:module1,
       b:module2,
     }
   });