vuex的使用（组件通信）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一个公共仓库，保存着所有组件都能共用的数据。

1.安装

npm i vuex

2.引入（在项目下新建store文件夹，然后新建一个index.js文件添加以下代码）

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

//准备actions——用于响应组件中的动作
const actions = {
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
}
//准备state——用于存储数据
const state = {
	sum:0, //当前的和
}
//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

然后在main.js引入此文件并且在创建Vue的时候加上store属性，

import store from './store/index'

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
})

这样我们的Vm以及Vuecomponent实例对象上就有了$store属性

当像修改store的状态，通常需要经过以下步骤

首先我们要使用dispatch()指定要使用的actions

incrementOdd(){
	this.$store.dispatch('jiaWait',this.number)
},

在actions里面再去调用commit()方法去调用指定Mutations的方法（这里使用setTiout模拟Ajax获取数据在调用方法传参数）

//准备actions——用于响应组件中的动作
const actions = {
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}

（参数说明，context——>里面就是一个小型的store包含下面的方法，而value是传进来的参数）

当mutations调用了就会被检测到，并且它可以直接找到state并且修改,(参数说明：state——>当前vuex里公共数据，value——>传进来的参数)

//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
}

自动生成方法

第一种：{{$stre.store.sum}} 手动寻找
第二种：引入要使用的自动生成的方法

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

在mapState方法的返回值就是一个方法

/* sum(){
	return this.$store.state.sum
},*/
...mapState(['sum'])   //就相当于自动创建一个上面的方法

//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
...mapGetters(['bigSum'])

//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
...mapMutations({increment:'JIA'}),

//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
...mapActions({incrementOdd:'jiaOdd'})