Vuex之State、Mutation、Action、Getter

store的文件夹下的index.js文件的内容如下：

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

//将vuex和vue绑定，让vue可以使用vuex
Vue.use(Vuex);

//将store对象暴露成默认对象
export  default  new Vue.Store({
	//声明全局的数据对象
	state:{
		属性名:属性默认值
	},
	actions:{},
	mutations:{}
})

Vuex有三部分组成：state、actions、mutations。

state

state一般中用来定义全局的数据源。
例如：
声明定义

  //声明全局变量
    state: {
      num:10，
      count:20
    }

访问方式1
　在组件中就可以直接通过this.$store.state.变量名获取值了，这种方式也是默认访问的方式。
　
访问方式2
　将全局数据，定义成当前组件的计算属性。

<script>
	import {mapState} from 'uvex';
	export default{
		data(){
			return{
				
			}
		},
		method:{},
		computed:{
			//将state中的属性映射成计算属性
			 ...mapState(['num','count'])
		}
	}
</script>

在该组件中，就可以直接使用num和count了。
例如：

<span>num:{{num}}</span>
<span>count:{{count}}</span>

效果图：

组件中直接操作state中的变量。
错误写法：

//直接在组件中修改num的值
testVuex:function(){
  this.$store.state.num=1000;
}

效果图：


当点击测试按钮之后，num的值变成了1000，页面上也有更新，但是浏览器上的插件并没有监听到。所以一般不要这样去使用，而是使用mutations去修改num的值。

mutations

mutation一般用来定义方法，修改state中的数据。通常也只能在Mutation中修改state声明的数据。

例如：
声明定义

  mutations: {
      //state参数值的就是上面的state，这里的state只是一个参数名，可以随便起
      addNum(state){
        state.num=100;
      },
      addNum2(state,step){
        state.num+=step;
      }
    }

组件中调用mutations中的方法

访问方式1：

 testVuex:function(){
 	 //调用addNum(state)方法，state是默认属性
     this.$store.commit('addNum');
      //调用addNum(state，step)方法
     this.$store.commit('addNum2',2);
}

方式方式2：

//按需引入mapMutations
import {mapMutations} from 'vuex'

export default {
	method:{
		//将Mutation中方法映射成普通方法。
		...mapMutations(['addNum','addNum2']),
		add:function(){
			//这时候addNum和addNum2就跟普通的method方法一样了
			this.addNum2(3);
		}
		
	}
}

效果图：

浏览器的监控插件中也能监听到。

　在mutation中使用异步操作的方式去修改state中的值，虽然这样可以修改成功，并且在视图层也能响应，但是在调试工具dev-tool中无法监听到这些变化。所以就使用actions的方式去进行异步操作。

actions

mutations中一般不直接使用异步操作方式修改state的全局变量，但actions中又不能直接修改state中的值。因此一般在actions中进行异步操作，然后在调用mutations中的方法。

例如：
声明定义

 actions: {
 	  //这里的state和mutations中的state参数一样，是固定写法，该参数可以随便写。
      asynChangeNum(state,step){
        setTimeout(()=>{state.commit('addNum2',step);},2000)
      }
    }

组件中调用
方式1

export default{
	method:{
		changeNum:function(){
			this.$store.dispatch('asynChangeNum',3);
		}
	}
}

方式2

//引入mapActions
import  {mapActions} from 'vuex';

export default{
	method:{
		//将Actions中的方法映射成普通方法
		...mapActions(['asynChangeNum']),
		changeNum:function(){
			this.asynChangeNum(3);
		}
	}
}

效果图：

Getter

Getter用于对Store中的数据进行加工处理形成新的数据。类似于Vue中的计算属性。
　当Store中的的数据发生变化，Getter的数据也会跟着发生改变。

声明：

getter:{
	showNum(state){
		return "state中的数据为："+state.count;
	}
}

使用：
方式1

//直接在组件中使用
{{this.$store.getters.showNum}}
或者
{{$store.getters.showNum}}

方式2

<template>
	<div>
		{{showNum}}
	</div>
</template>

<script>
	//使用mapGetters
	import  {mapGetters}  from "vuex";
	
	export default{
		computed:{
				//将getters映射成计算属性
				 ...mapGetters(['showNum'])
			}
	}
</script>

注意：
　1、mutations中的方法，一般不能以异步的方式操作state中的变量，因为虽然视图上能更新数据，效果也有，但是dev-tool插件没有办法监听到mutations中异步数据的变化。
　2、actions中可以直接执行异步操作数据，actions中无法直接操作state的数据，所以一般会在action中定义方法，然后再调用mutations中的方法，从而间接修改了state中的值。