Vuex状态管理集

Vuex是什么？
父子组件中共用的数据和操作单独提取出来，统一的进行管理，这样整个代码结构就显的非常的清晰。

Vue简单计数原本写法

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
	<p>计数{{count}}</p>
	<button @click="add">+</button>
	<button @click="reduce">-</button>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			count:0
		},
		methods: {
			add:function () {
				this.count++
			},
			reduce:function () {
				this.count--
			}
		}
	});
</script>

Vuex修改简单计数器【写法一】

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
	<p>计数 {{count}}</p>
	<button @click="add">+</button>
	<button @click="reduce">-</button>
</div>
<script>
	var store = new Vuex.Store({
		state:{
			count:0
		},
		// 唯一一个可以更改状态的地方
		mutations:{
			addState:function(state){
				state.count++;
			},
			reduceState:function(state){
				state.count--;
			}
		}
	})
	var vm = new Vue({
		el: '#app',
		store,
		computed: {
			count:function(){
				return this.$store.state.count
			}
		},
		methods: {
			add:function () {
				store.commit("addState")
			},
			reduce:function () {
				store.commit("reduceState")
			}
		}
	});
</script>

Vuex修改简单计数器【写法二】

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vuex/2.4.0/vuex.js"></script>
	<div id="app">
		<p>{{count}}</p>
		<my-addbtn></my-addbtn>
		<my-removebtn></my-removebtn>
	</div>
	<script>
		var store = new Vuex.Store({
			state:{
				count:0
			},
			// 唯一一个可以更改状态的地方
			mutations:{
				add:function(state){
					state.count++;
				},
				remove:function(state){
					state.count--;
				}
			}
		})
		var vm = new Vue({
			el: '#app',
			computed: {
				count:function(){
					return store.state.count;
				}
			},
			components:{
				'my-addbtn':{
					template:'<button @click="setCount">+</button>',
					methods: {
						setCount:function () {
							store.commit("add")
						},
					}
				},
				'my-removebtn':{
					template:'<button @click="setCount">-</button>',
					methods: {
						setCount:function () {
							store.commit("remove")
						},
					}
				}
			},
		});
	</script>

把共享的数据提取出来，除了共享数据以外呢，对操作共享数据的方法也可进行提取，把他们行成一个整体，从原来分布的操作，
给他提取到一个整体当中，调用也是比较容易的，通过computed计算属性的方式

方法调用 通过commit提交的方法进行触发，只要一点就会触发这个方法

以上就是Vuex状态管理的操作方式和操作流程