vue.js状态管理机制vuex--状态使用

vue.js状态管理机制vuex

一般使用到的情况是在多个组件中依赖于一个数据状态时，这样避免的大量的父子组件传值，更便于维护代码。

概念

官网给的概念是：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
从中我们可以解读为这个是集合了所有组件的状态，并且按照一定的方式去控制这些状态，来导致组件间的状态发生变化。

这个是官方给的单向数据流图，为什么是单向流呢？个人认为这是保证每个状态在表示层和存储管理的时候能够不相互影响。

vuex的五个属性的简单定义：

1. state：vuex的基本数据，用来存储变量
2. getter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于：1. action 提交的是 mutation，而不是直接变更状态。 2. action 可以支持异步操作，比如发起请求等。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。一般是集成多个状态管理文件。

实际应用

比如现在我们需要一个加减器类似这样

在store文件下创建index.js

export default {
state:{ count:1, };
mutations:{
	changeCount(state,dataAsync){
		state.count = dataAsync.count;
	}
}
}

在组件中创建

<template>
  <div class="main">
   	<span @click="transCount('-')">-</span>
   	<span>{{ count }}</span>
   	<span @click="transCount('+')">-</span>
  </div>
</template>
<script>
	import { createNamespacedHelpers } from "vuex";
	const { mapState, mapMutations } = createNamespacedHelpers("文件名");//引入
	export default{
		data(){
			return {
				midNum:0, //中间量
			}
		},
		created(){
			/**因为state是实时更新的，mutations无法进行异步操作，而如果直接修改state的
			话是能够异步操作的，当你异步对state进行操作时，还没执行完，这时候如果state已
			经在其他地方被修改了，这样就会导致程序存在问题了。所以state要同步操作，
			通过mutations的方式限制了不允许异步。**/
			this.midNum = this.count;//数据传入本地这样才可以进行修改
		},
		computed：{
		...mapState(["count"])
		},
		methods:{
			...mapMutations(["changeCount"]),
			transCount(sym){
				switch(sym){
					case "-":
						this.midNum--;
						break;
					case "+":
						this.midNum++;
						break;
					default:
						break;
					}
				this.changeCount(this.midNum);
			}
		}
	}
</script>

本处没有用到getter，action，modules，后续单独写入

gettter和action

//状态管理js中
state:{ count:[1,2,3,4,5], },
getters: {
		countValue: state => {
		  return state.count.filter(v=> v);
		},
		countLength: (state, getters) => {
    		return getters.count.length
  		}
	},
mutations:{
	changeCount(state,dataAsync){
		state.count = state.count.push(6);
	}
},
action:{
		changeCountAction(context){
    		setTimeout(function(){
     		 context.commit("changeCount")
   			},1000)
 		}
	},
----------------------------------------分割线-----------------------------------------
//组件template
<p v-for="item in countValue" :key="item"> {{ item }}</p>
<p> {{ countLength}}</p>
<p @click="changeC()"> 改变 </p>
//然后在组件的js中
computed:{
	countValue() {
            return this.$store.getters.countValue;
        },
    countLength() {
		    return this.$store.getters.countLength
		}
}
methods:{
	changeC(){
		this.$store.dispatch("changeCountAction");
	}
}

Vuex之理解Getters的用法
Vuex中，action的概念理解
vuex深入理解 modules