几分钟搞懂Vuex(State,Mutations,Actions)

这是Vuex官方给出的图片，看起来有点不好理解，上详解！！！！
开始介绍之前，我们需要将Vuex挂载到Vue实例上面，这样我们才能在Vue的所有组件中都可以使用这些数据，这里我们store文件夹下面的index.js存放我们的Vuex代码。
记得在入口文件main.js里面导入store对象

State

暂时可以将他看作是data中的属性，也就是我们当前的状态。
state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变化，一旦属性发生变化，会通知所有用到这个属性的界面并进行刷新。
但有一个前提，所有的属性都必须先初始化好，如果直接在mutations里面添加一个新的属性，界面是不会显示的。

//Vuex
const store = new Vuex.Store({
   
	sate:{
   
		count: 0
	}，
	mutations:{
   
		increament(state){
   
		state.count ++
		},
		decreament(state){
   
		state.count --
		}
	}
})


//App.vue
<template>
	<div id="app">
		<p>{
   {
   count}}</p>
		<button @click="increment">+1</button>
		<button @ click="decrement">-1</button>
	</div>
</template>
<script>
export default {
   
	name:' App', 
	components:{
   
	}, 
	computed:{
   
		count: function(){
   
		 //可以通过$this.$store.sate访问Vuex里面state的状态
			return this. $store.state.count 
	}
},
	methods:{
   
		increment: function ){
   
		//通过this.Store.commit(mutations中的方法)来修改状态
			this. Sstore. commit(' increment')
		}, 
		decrement: function )