Vuex介绍

1、概念

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

2、何时使用？

多个组件需要共享数据时

3、搭建vuex环境

a、创建文件：src/store/index.js

// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex 插件
Vue.ues(Vuex)

// 准备actions对象 ----  响应组件中用户的动作
const actions = {}
// 准备mutations对象 ----  修改state中的数据
const mutations = {}
// 准备state对象 ----  保存具体的数据
const state = {}

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

b、在main.js中创建vm时传入store配置项

// 引入store
import store from './store'

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

4、基本使用

a、初始化数据、配置actions、配置mutations，操作文件store.js

// 引入Vue 核心库
// 引入Vuex
import Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)

const actions = {
	// 响应组件中加的动作
	jia(context, value){
		// console.log('actions中的jia被调用了',miniStore, value);
		context.commit('JIA', value);
	},
}

const mutations = {
	// 执行加
	JIA(state, value){
		// console.log('mutations中的JIA被调用了', state, value);
		state.sum += value;
	}
}

// 初始化数据
const state = {
	sum: 0;
}

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

b、组件中读取vuex中的数据： $store.state.sum

c、组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据)或 $store.commit(‘mutations中的方法名’,数据)

注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接写commit

5、getters的使用

a、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

b、在store.js 中追加getters配置

const getters = {
   bigSum(state){
   		return state.sum * 10;
   }
}

// 创建并暴露store
export default new Vuex.Store({
   ... ...
   getters
})

c、组件中读取数据： $store.getters.bigSum

6、四个map方法的使用

a、mapState方法： 用于帮助我们映射state中的数据为计算属性

computed:{
	// 借助 mapState 生成计算属性：sum、school、subject（对象写法）
	...mapState({ sum: 'sum', school: 'school', subject: 'subject' }),
	// 借助 mapState 生成计算属性：sum、school、subject（数组写法）
	...mapState(['sum', 'school', 'subject'])
}

b、mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{
	// 借助 mapGetters 生成计算属性：bigSum（对象写法）
	...mapGetters({ bigSum:'bigSum' }),

	// 借助 mapGetters 生成计算属性：bigSum（数组写法）
	...mapGetters(['bigSum'])
}

c、mapActions方法：用于帮助我们生成与action对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
	// 靠 mapActions 生成：incrementOdd、incrementWait（对象形式）
	...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' }),

	// 靠 mapActions 生成：incrementOdd、incrementWait（数组形式）
	...mapActions(['jiaOdd', 'jiaWait'])
}

d、mapMutations方法：用于帮助我们生成与mutation对话的方法，即：包含$store.commit(xxx)的函数

methods:{
	// 靠 mapMutations 生成：increment、decrement（对象形式）
	...mapMutations({ increment:'JIA', decremet:'JIAN' }),

	// 靠 mapMutations 生成：JIA、JIAN（对象形式）
	...mapMutations(['JIA', 'JIAN'])
}

注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

7、模块化 + 命名空间

a、目的：让代码更好维护，让多种数据分类更加明确。

b、修改store.js

const countAbout = {
	namespaced: true, // 开启命名空间
	state: { x: 1 },
	mutations: { ... },
	actions: { ... },
	getters: {
		bigSum(state){
			return state.sum * 10;
		}
	}
}

const personAbout = {
	namespaced: true; // 开启命名空间
	state: { ... },
	mutations: { ... },
	actions: { ... }
}

const store = new Vuex.Store({
	modules: {
		countAbout,
		personAbout
	}
})

c、开启命名空间后，组件中读取state数据：

// 方式一：自己直接读取
this.$store.state.personAbout.list;
// 方式二：借助mapState读取
...mapState('countAbout',['sum', 'school', 'subject']);

d、开启命名空间后，组件中读取getters数据：

// 方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName'];
// 方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum']);

c、开启命名间后，组件中调用commit

// 方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON', person);
// 方式二：借助mapMutations
...mapMutations('countAbout', {increment:'JIA', decrement:'JIAN'});