vue2中的vuex的使用和讲解，$store(它就是由vuex创建的)

1、首先我们先懂这个东西

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

补：上面这句话太抽象了，简单地说就是$store里面有方法和共享数据，但是这个方法只能对里面的共享数据操作，你传参也只是配合方法对这个共享数据操作。
而这个共享数据（当然是可以读取啦hhhhh），是这样的，就一个共享数据有用。它可以存好多个共享数据，对象，字符串，数字都能存，具体看下面的解释，懂了就so easy

2、引用尚硅谷的图

这个能看懂就基本懂了,使用入口不是Backend API，而是最左边的VC（这个才是你编写的组件）

actions——用于响应组件中的动作

mutations——用于操作数据（state）

state——用于存储数据

3、先给大家看一下这个创建的代码（index.js），有点抽象不好讲解

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作，调用mutations中的方法操作数据
const actions = {
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）,响应actions中的方法
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

4、普通组件时如何调用方法的？

假设组件里面有一个数据 n=1(这个不是公共数据)，state.sum才是公共数据，其实原理就是，通过调用actions 的方法触发mutations 的方法修改state。修改state的数据才是目的。
VC（组件）->actions ->mutations ->state
如何取出store的数据,看下面这行代码

{{this.$store.state.sum}}

a)正常调用方式，调用actions 中的方法

this.$store.dispatch('jiaOdd',this.n)

这时候，触发actions 中的jiaOdd方法，jiaOdd再触发mutations中的JIA方法

b)但是其实组件也可以直接调用mutations中的JIA方法（官方不建议）

this.$store.commit('JIA',this.n)

看VC中的属性，命令行打印

5、使用使用方式很简单，index.js就在上面的代码里面