Vuex核心内容梳理

Vuex官方链接

1、Vuex是干什么的

Vuex实现组件全局状态（数据）管理的一种机制，可以方便的实现组件间的数据共享

2、Vuex的使用

store.js：

import { createStore } from "vuex";

export default createStore({
	state: {},
	mutations: {},
	actions: {},
	getters: {},
	modules: {},
});

（1）state：提供唯一的共享数据源

组件访问state调用方式一：

this.$store.state.全局变量名

组件访问state调用方式二：

// 1、从Vuex中引入mapState函数
import { mapState } from 'vuex'

// 2、将 state 中的全局变量，映射为当前组件的计算属性
computed:{
	...mapState(['全局变量名'])
}

（2）mutations：用于变更state中的数据

state中的数据只能通过mutations来变更，且不能在mutations中直接进行异步操作！！！

在mutations中定义函数的方法同methods
（注：函数第一个参数恒为state，可在第二个参数中传参）

调用方法

组件访问mutations调用方式一：

this.$store.commit('mutations中函数名')

组件访问mutations调用方式二：

// 1、从Vuex中引入mapMutations函数
import { mapMutations } from 'vuex'

// 2、将指定的 mutations 中的函数，映射为当前组件的 methods 函数
methods:{
	...mapMutations(['mutations中函数名'])
}

（3）actions：用于进行异步操作

// step为传递参数
actions: {
		异步函数名(context,step){
			setTimeout(()=>{
				context.commit('mutations中函数名',step);
			},1000)
		}
	},

组件访问actions调用方式一：

// step为传递参数
this.$store.dispatch('actions中异步函数名',step)

组件访问actions调用方式二：

// 1、从Vuex中引入mapActions函数
import { mapActions } from 'vuex'

// 2、将指定的 actions 中的函数，映射为当前组件的 methods 函数
methods:{
	...mapActions(['actions中异步函数名'])
}

（4）getters：用于包装 state 中的数据

state: {
    data: 0,
},
getters: {
    showData: (state) => {
      return "最新数据：" + state.data;
    }
},

组件访问getters调用方式一：

this.$store.getters.函数名

组件访问getters调用方式二：

// 1、从Vuex中引入mapGetters函数
import { mapGetters } from 'vuex'

// 2、将 getters 中的函数，映射为当前组件的计算属性
computed:{
	...mapGetters(['getters中函数名'])
}

（5）modules：模块化处理共享数据

将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块