vue系列教程-15vuex的使用 (2)

因为我们没有具体的后台，所以就模拟一个延时的操作，并使用 async来同步方法

actions: { async changeColor(context, value) { //模拟一个存储属性的方法 function saveUserInfo() { return new Promise((resolve) => { setTimeout(resolve, 1000) }) } // 真实的开发啊 拿到用户id const uid = context.state.user.id; // 并调用后台方法this.api.saveUserInfo(...) await saveUserInfo(); context.commit(\'setColor\', value); } },

然后在组件中定义一个方法 this.$store.dispatch可以触发actions

setUserColor() { this.$store.dispatch("changeColor", "yellow"); }

在页面中绑定这个事件

<button @click="setUserColor">设置用户默认主题色</button>

看看效果

modules

分模块其实很好理解吧，就是后期 vux 的属性太多，那么我们就分为一个一个的模块使用

我们在 modules中定义一个modulea模块，在这个模块里面的state定义一个primaryColor

modules: { modulea: { state: { primaryColor: "white", }, mutations: { } } }

在组件中调用一下

<div>modulea模块的值-{{$store.state.modulea.primaryColor}}</div>

看看效果