Vuex 简介

一、什么是 Vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它由五部分组成

运行机制

1.1 Vuex 由五部分组成

• state：数据
• mutations：唯一可以修改 state 数据的地方
• actions：可以包含异步操作
• getters：类似于 vue 组件中的计算属性，对 state 数据进行计算
• modules：模块化管理 state，每个模块拥有自己的 state、mutations、actions、getters

1.2 基础使用步骤

1. 安装 vuex

   npm install vuex -S
   

2. 导入 vuex

import Vuex from 'vuex'
Vue.use(Vuex)

3. 创建 store 对象

const store = new Vuex.Store({
    state:{count:0}
})

二、State

state 即 Vuex 中的基本数据

2.1 在 Vue 组件中获得 Vuex 属性

可以通过 Vue 中的 computed 获得 Vuex 的 state

1. 语法一：

   computed:{
       数据变量名:function(){
           return this.$store.state.数据变量名
       }
   }
   

2. 语法二：

   //导入 mapState 函数
   import {mapState} from 'vuex'
   computed:{
       ...mapState(['变量名'])
   }
   

三、mutations 定义修改数据方法

1. 提交 mutations 是更改 Vuex 中的 store 中的状态的唯一方法

2. mutations 必须是同步的，如果是异步需要使用 action

export default new Vuex.Store({
    state:{
        num:0
    },
    mutations:{
        方法名(state){
            //对于数据的处理逻辑
            //其中方法中的 state 形参就是上面的 state 共享数据对象
        }
    }
})

3.1 获取 Vuex 中 mutations 中的方法

组件中通过 methods 中的方法调用 mutations 中的方法

• 语法一：

  methods:{
      this.$store.commit("方法名")
  }
  

• 语法二：

  // 导入 mapMutations 函数
  import {mapMutations} from 'vuex'
  methods:{
      ...mapMutations(['方法名'])
  }
  

四、actions

4.1 actions 初步使用

actions 类似于 mutations，不同在于：

• actions 提交的是 mutations，而不是直接变更状态
• actions 可以包含异步操作

export default new Vuex.Store({
    state:{
        num:0
    },
    mutations:{
        addNum(state){
            state.num ++;
        }
    },
    actions:{
        // arg 是从页面中传递过来的内容
        addSync(context,arg){
            setTimeout(() => {
                context.commit("addNum");
            },1000);
        }
    }
})

4.2 获取 vuex 中 actions 中的方法

1. 第一种方式：

   import {mapMutations} from "vuex";
   export default {
   	methods:{
           clickAdd:function(){
               this.$store.dispatch("addSync");
           }
       }
   }
   

2. 第二种方式：

   import {mapActions} from "vuex"
   export default{
       methods:{
           ...mapActions(["addSync"]),
           clickAdd:function(){
               this.addSync(2);
           }
       }
   }
   

五、getters

• getters 主要是对 store 中的数据进行加工处理包装，不会修改 store 中的数据
• 它类似于计算属性，store 中的数据发生变化，getters 中的数据也会跟着变化

定义：

export default new Vuex.Store({
    state:{
        num:10
    },
    getters:{
        dataRes(state){
            return "修饰后的结果" + state.num;
        }
    }
})

• 调用方式一：

  <p>{{$store.getters.dataRes}}</p>
  

• 调用方式二：

  通过计算属性调用

  <template>
  	<div>
          <p>{{dataRes}}</p>
      </div>
  </template>
  
  <script>
  	import {mapGetters} from "vuex";
      export dafault {
          computed:{
              ...mapGetters(["dataRes"])
          }
      }
  </script>