Vuex的使用
1、Vuex介绍
1.1、概念
专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件之间的通信。
1.2、什么时候使用Vuex
多个组件共享同一个状态（数据）的时候。
1.3、Vuex原理图
注意：图中没有体现出来，但是VueComponent可以直接commit给Mutations。
1.4、搭建vuex环境
1、npm i vuex
如果不指定版本，会自动安装vuex4，而vuex4只能在vue3中使用，因此vue2要指定vuex3的版本。npm i vuex@3
2、main.js
import Vuex from 'vuex';
// 使用插件
Vue.use(Vuex);
3、src下创建store文件夹，创建index.js文件。
// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue';
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions——用于响应组件中的动作
const actions = {};
// 准备mutations——用于操作数据（state）
const mutations = {};
// 准备state——用于存储数据
const state = {};
// 创建store
const store = new Vuex.Store({
actions,
mutations,
state
});
// 暴露store
export default store;
main.js
// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';
// 引入store
import store from './store';
Vue.config.productionTip = false
// 创建Vue实例对象 --- vm
new Vue({
render: h => h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this; // 安装全局事件总线
},
mounted() {
console.log('vm', this);
}
}).$mount('#app')
1.5、Vuex开发者工具
就是vue的开发者工具，因为vuex是vue开发者团队开发的。
2、基本使用
1、store文件夹下的index.js
// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue';
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions——用于响应组件中的动作
const actions = {
// 响应组件中加的动作
jia(context, value) {
context.commit('JIA', value);
}
};
// 准备mutations——用于操作数据（state）
const mutations = {
// 执行加，方法大写是为了和actions中的方法区别
JIA(state, value) {
state.sum += value;
}
};
// 准备state——用于存储数据
const state = {
sum: 0
};
// 创建store
const store = new Vuex.Store({
actions,
mutations,
state
});
// 暴露store
export default store;
2、组件读取vuex中的数据：$store.state.sum
3、组件中修改vuex中的数据：$store.dispatch('action中的方法名', 数据) 或者 $store.commit('mutations中的方法名',数据)
备注：如果没有网络请求以及业务逻辑，组件中也可以直接越过action，也就是说不写dispatch，直接commit给mutations去操作数据。
3、配置项
3.1、getters配置项
1、当state中的数据需要经过加工之后再使用时，可以使用getters加工。
2、在store.js中追加getters配置。
3、组件中读取数据：$store.getters.bigSum
index.js
......
// 准备getters——用于将state中的数据进行加工，和computed属性类似
const getters = {
bigSum(state) {
return state.sum + '元';
}
}
// 创建store
const store = new Vuex.Store({
actions,
mutations,
state,
getters
});
// 暴露store
export default store;
3.2、四个map方法的使用
1、mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
// 借助mapState生成计算属性：sum,school（对象写法）
...mapState({sum: 'sum', school:'school'}),
// 借助mapState生成计算属性：sum,school（数组写法）
...mapState(['sum', 'school']),
}
2、mapGetters方法：用于帮我们映射getters中的数据为计算属性
computed: {
// 借助mapState生成计算属性：sum,school（对象写法）
...mapGetters({bigSum: 'bigSum'}),
// 借助mapState生成计算属性：sum,school（数组写法）
...mapGetters(['bigSum']),
}
3、mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。
methods: {
// 靠mapActions生成：incrementOdd、incrementWait（对象写法）
...mapActions({incrementOdd: 'jiaOdd', incrementWait: 'jixWait'});
// 靠mapActions生成：incrementOdd、incrementWait（数组形式）
...mapActions(['jiaOdd', 'jixWait']);
}
4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数。
methods: {
// 靠mapMutations生成：increment、decrement（对象写法）
...mapMutations({increment: 'JIA', decrement: 'JIAM'});
// 靠mapMutations生成：JIA、JIAM（数组形式）
...mapMutations(['JIA', 'JIAM']);
}
备注：mapActions和mapMutations使用的时候，如果需要传递参数需要：在模板中绑定事件时传递好参数，否则参数会是事件对象。
4、vuex模块化 + namespace
1、目的：让代码更好维护，让多种数据分类更加明确。
2、修改index.js
// count模块相关业务
const countAbout = {
namespaced: true, // 开启命名空间
state: {},
mutations: {},
actions: {},
getters: {}
}
// person模块相关业务
const personAbout = {
namespaced: true, // 开启命名空间
state: {},
mutations: {},
actions: {},
getters: {}
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
});
3、开启命名空间后，组件中读取state数据
this.$store.state.personAbout.list
...mapState('countAbout', ['sum','school','subject']);
4、开启命名空间后，组件中读取getters数据
this.$store.getters['personAbout/firstName']
...mapGetters('countAbout', ['bigSum']);
5、开启命名空间后，组件中调用dispatch
this.$store.dispatch('personAbout/addPerson', person)
...mapActions('countAbout', {incrementOdd: 'jiaOdd'});
6、开启命名空间后，组件中调用commit
this.$store.commit('personAbout/ADD_PERSON',person);
...mapMutations('countAbout', {increment: 'JIA'});
