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、甚至是嵌套子模块