Vuex在项目开发中经常用到的几个属性，任何人都能看得懂

基于Vue2和Ant-Design-Vue封装的后台系统，其中包括很多常用组件和方法：Smile Admin

vueX的五个核心概念，个人理解(具体可以参照官网）
State=>基本数据，存储一些全局的data数据；
Mutation=>对state中的数据进行修改，同步；
Action=>来操作Mutationde的方法，来进行对state中的数据进行修改，异步；
Getter=>就像是一个state的装饰器，对state中的数据进行一些包装；
Module=>就是模块化的Vuex；

state
vuex中的基本数据类型，进行一些变量的存储，类似于data中的数据

state:{
count:0,
}

在引用vuex中的state数据时，在vue页面中有两种方法，这两种方法并没有实质上的区别。

一、第一种
在vue的计算属性**(computed)**中获取。通过this.$store.state获取vuex中state中存储的数据。

computed:{
//count现在就相当于data中的数据，可以使用插值语法直接用，例如{{count}}
 count(){
     return this.$store.state.count
   }
}

通过计算属性获取之后就可以直接渲染到页面上。

<template>
  <div class="wrap>
     <div>
	      现在的数据是------
	      <span>{{count}}</span>
     </div>
  <div>
</template>

二、第二种
在vue页面中引入mapState辅助函数，这是vuex自带的属性，然后在computed属性中获取，例如；

<scripet>
//通过vuex引入mapState
 import {mapState} from 'vuex'
 export default{
  data(){
	  return {
	  
	   }
  },
  computed:{
  ...mapState(['conut'])
  },
  }
</scripet>

接下来就是和第一中方法一样了，直接插值语法使用。

Mutation
提交mutation是更改Vuex中的state中的数据的唯一方法，mutation必须是同步的，如果要异步需要使用Action(j接下来会讲到)，和上边一样，通过mutation修改state数据也有两种方法。
一、第一种
在vue页面(或者组件中），先通过事件(点击，触碰）调用Mutation中的方法，来进行修改state中的数据。

<template>
  <div class="wrap>
     <div>
	      现在的数据是------
	      <span>{{count}}</span>
     </div>
     <div>
       <button @click='add'>点我 +1</button>
    </div>
  <div>
</template>
<scripet>
 export default{
  data(){
	  return {  }
  },
  methods:{
  //commit就像是一个工具，可以转到Mutation中去，自动匹配括号里的方法名（store Add），然后也可以进行传参。
   add(){
      this.$store,commit('storeAdd')
    }
  },
  //有传参情况,如果需要传多个数据，可以通过对象的方法进行
   addPro(index){
      this.$store,commit('storeAdd',index)
    }
  },
  }
</scripet>

然后是Vuex中Mutation中的代码

Mutation：{
//在mutation的方法中，第一个参数必须是state(可以获取到整个state),可以有第二个、第三个、、、参数。
//无传参
 storeAdd(state){
   state.count++
 },
 //有传参
  storeAddPro(state,num){
   state.count+=num
 },
}

二、第二种
在vue页面中引入mapMutattion辅助函数，这是vuex自带的属性，然后在methods中获取方法，例如；

<template>
  <div class="wrap>
     <div>
	      现在的数据是------
	      <span>{{count}}</span>
     </div>
     <div>
       <button @click='storeAdd'>点我 +1</button>
    </div>
  <div>
</template>
<scripet>
//通过vuex引入mapState
 import {mapMutation} from 'vuex'
 export default{
  data(){
	  return {}
  },
  methods:{
  //这个时候storeAdd就相当于自己的方法，直接可以绑定点击事件。(简单来说就是把Mutation中的方法自己拿来用。)
  ...mapMutation(['storeAdd'])
  },
  }
</scripet>

Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation(唯一改变state中数据的途径），而不是直接变更状态。
Action 可以包含任意异步操作。
和前两种方法一样，同样有两种方式来提交到Mutation来进行修改数据
一、第一种
在vue页面(或者组件中），先通过事件(点击，触碰）调用Mutation中的方法，来进行修改state中的数据。(因为需要我就加一个延时器作为异步操作)

<template>
  <div class="wrap>
     <div>
	      现在的数据是------
	      <span>{{count}}</span>
     </div>
     <div>
       <button @click='addAsync'>点我 +1</button>
    </div>
  <div>
</template>
<scripet>
 export default{
  data(){
	  return {  }
  },
  methods:{
  //dispatch就像是一个工具，可以转到Action中去，自动匹配括号里的方法名（asyncAdd），然后也可以进行传参。
   addAsync(){
      this.$store.dispatch('ActionAdd')
    }
  },
  //有传参情况,如果需要传多个数据，可以通过对象的方法进行
   addPro(index){
      this.$store,dispatch('ActionAdd',index)
    }
  },
  }
</scripet>

然后是Action 的代码 (里面包括Mutation)

Mutation：{
 storeAdd(state){
   state.count++
 },
 //有传参
  storeAddPro(state,num){
   state.count+=num
 },

Action：{
//在Action的方法中，第一个参数必须是context(可以获取到整个Mutation),可以有第二个、第三个、、、参数。
//无传参
 ActionAdd(context){
 //上边说过，commit可以获取到整个Mutation,然后自动匹配括号里的方法
 //增加延时器，达到异步的作用
   setTimeout(()=>{
     context.commit('storeAdd')
   },1000)
 },
 //有传参
  ActionAddPro(context,num){
     setTimeout(()=>{
     context.commit('storeAdd'，num)//把参数传到Mutation的方法中
   },1000)
 },
}

二、第二种
在vue页面中引入mapAction辅助函数，这是vuex自带的属性，然后在methods中获取方法，例如；

<template>
  <div class="wrap>
     <div>
	      现在的数据是------
	      <span>{{count}}</span>
     </div>
     <div>
       <button @click='ActionAdd'>点我 +1</button>
    </div>
  <div>
</template>
<scripet>
//通过vuex引入mapState
 import {mapAction} from 'vuex'
 export default{
  data(){
	  return {}
  },
  methods:{
  //这个时候ActionAdd就相当于自己的方法，直接可以绑定点击事件。(简单来说就是把Action中的方法自己拿来用。)
  ...mapAction(['ActionAdd'])
  },
  }
</scripet>

其他的属性用的很少，甚至在开发过程中不会遇到，有需要的同学请移步到Vuex官网