vuex实例的五个选项：

• vuex是一个整体，在vuex组件文件中，不可以修改vuex的状态量，state.js里的变量可以获取，不可以直接修改。
• vuex里的状态量state只能用vuex的其他选项来修改

一、state：作为vuex的数据源。

A .在组件文件中（.vue文件）中如何引用state数据：

//可以直接引用state数据
 <div>{{ this.$store.state.数据变量名}}</div>
 this.$store.state.数据变量名

B .一般的，会在vue组件文件中设置一个计算属性，来中转vuex中state的状态量。

        computed:{
            count:function(){
            //直接在计算属性中中转vuex中state的状态量
             return this.$store.state.count;
			}
		}

** C .可以采用mapState来对state状态量进行引用。**

		 import {mapState} from ‘vuex’
		 //在计算属性中引用
          computed:{
             …mapState([‘count’,‘a’,‘c’])
			}

D .在js文件中如何引用state状态量。

 import store from ‘@/store’
	store.state.count

二、mutations(方法)：设置对state数据进行操作的功能。

• 利用mutations设置的方法必须使用this.$store.commit()方法来调用
  

格式1：【mutations的载荷分发】

 格式1：this.$store.commit(‘add’,v);
        例：mutations:{
              add:function(state,pa){
                 state.count+=pa;
}
}

格式2：【mutations的对象形式分发】

		格式2：this.$store.commit({  
                	 type:‘add’,
                	 num:v,
                	 w:1000
				})
			
            例：mutations:{
                  add:function(state,pa){
                     state.count+=pa.num
					}
				}

** 也可以利用mapMutations来对方法进行分发：也是最常用的方法**

 import {mapState,mapMutations} from ‘vuex’
           //因为mutations是一个方法，需要在方法区调用
            methods:{
              	  …mapMutations([‘addCount’,‘subCount’]),
                		btnClick(){
                 			 this.addCount({num:10});
					}
			}

以下四个图片是从state数据源到mutations方法的基本用法

（3）getters：对于state数据获取之前需要再次编译。【类似于数据的计算属性】

注：getters类似于state，都是数据。getters比较类似于数据的计算属性
getters是state的计算属性，getters是依据state里的值，当state发生变化时,getters从新计算。
state是独立的数据，getters是依赖state的数据

• 计算属性：当数据源发生变化时，数据从新计算

1、数据源的计算属性：

计算属性:function(state){
  return 计算属性的值
}

2、在.vue文件中如何引用Getter属性：

{{this.$store.getters.计算属性名}}

3、利用ES6的解构方式来引用Getter属性：

import {mapGetters} from ‘vuex’;
computed:{
  …mapGetters([‘计算属性名’]),
}

• state、mutations、gerrers都加载完以后的代码如下：

//在.vue文件中，template中的书写
 {{this.$store.getters.countInfo}}
    <p>
      <button @click="addClick">增值</button>
      <button @click="subClick">减值</button>
    </p>

//state。js的书写
export default{
  count:100
}

mutations.js中的书写
export default{
addss(state,v){
  state.count=state.count+v.numb
},
  subss(state,v){
    state.count=state.count-v.numb
  }
}

//getters.js中的书写
export default {
countInfo(state){
  return `第${state.count}次`
}
}

//js
<script>
  import Nav from "../components/NavTitle"
  import {mapState,mapMutations,mapGetters} from 'vuex'
    export default {
        name: "index",
      components:{
          Nav
      },
      computed:{
        ...mapState(['x','count'])
      },
      methods:{
        ...mapMutations(['subss','addss']),
          addClick(){
             // this.$store.commit('addss',{numb:10})
            this.addss({numb:20})
          },
        subClick(){
             //this.$store.commit("subss",{numb:20})
          this.subss({numb:50})
        }
      }
    }
</script>

-直接写在计算属性里如下代码：

//直接temp用
 {{temp}}
 //计算属性里定义变量
 computed:{
        ...mapState(['count']),
        temp(){
          return this.$store.getters.countInfo
        }
      },

state、mutations、gerrers都加载完以后的后台如下图：

四、Actions： actions类似于mutations，但是无法修改状态量，只能完成对mutations的引用

1、异步调用mutations方法：

• actions中指定的都是方法，这些方法不能直接操作数据源和计算属性，只能间接调用mutations方法。

 actions:{
          方法名(context/{mutations}){
             //context是一个vuex的实例对象
}
}
例：actions:{
       actionAddCount(context){
          context.commit(‘addCount’,{num:10});
}
}

2、在src\vuex\actions.js文件中：

export default {
  xyz:function(context){
     context.commit(‘mutations方法名’,参数);
}
}

3、 在组件文件中如何调用actions方法：

this.$store.dispatch(‘actions方法名’,参数);

4、使用ES6解构的方式调用actions方法：

import {mapActions} from ‘vuex’;
methods:{
   …mapActions([‘xyz’]);
}

允许使用mapActions在组件文件（.vue文件）中分发actions方法。
          import {mapState,mapMutations,mapGetters,mapActions} from ‘vuex’
          methods:{
             …mapActions([‘actionAddCount’,‘actionSubCount’]),
             btnAddClick(){
                this.actionAddCount({num:100});
}
}

5、actions与mutations的区别：

• mutations只能执行同步操作，actions可以执行异步操作。

总结

state 、getters、mutations、actions、
前两个是数据，后两个是方法

getters依赖于state。getters是计算属性，state是数据源。
所以他们两个都注册在computed计算属性里面

mutations、actions都是方法。
所以他们两个都注册在methods方法里面
actions不可以修改状态量，actions是对mutations的引用
actions可以帮助我们解决异步问题，mutation不能解决异步问题
也就是，如果没有异步问题，就不需要actions方法。mutations就可以

• state 、getters、mutations、actions、四个文件的共同点：

   	1、建好以后就暴露出去：import default { }
   	2、都建在src文件夹下vuex文件夹的根目录
   	3、都是js文件		
  

四个文件的引用方法不一样：如下图：