![](/img/trans.png)
[英]How to use computed property with getters and setters to trigger commit in Vuex
[英]How to use Vuex with asynchronous computed setter property
我有以下组件,其中有theme
计算属性。 计算属性的set
函数执行一个名为setTheme
的Vuex动作,该动作返回一个Promise,并在Vuex状态下更新theme
属性。
<template>
<div>
<input id="light-theme-radio" v-model="theme" type="radio" value="light">
<label for="light-theme-radio">Light</label>
<input id="dark-theme-radio" v-model="theme" type="radio" value="dark">
<label for="dark-theme-radio">Dark</label>
</div>
</template>
<script>
import Vue from "vue";
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("theme");
export default {
computed: {
theme: {
get() {
return this.$store.state.theme.theme;
},
set(value) {
this.setTheme(value);
}
}
},
methods: {
...mapActions(["setTheme"])
}
};
</script>
问题在于setTheme
完成用新选择的项目更新单选按钮后,没有调用theme.get
计算属性。 使用异步设置器时解决此问题的最佳方法是什么? 这是我的Vuex的样子:
export const state = {
theme: "light"
};
export const mutations = {
theme: (s, p) => (s.theme = p)
};
export const actions: ActionTree = {
async setTheme(context, theme) {
context.commit("theme/theme", theme);
// ...omitted
await Timer.delay(750);
// ...omitted
}
};
const mainModule = {
actions,
getters,
mutations,
namespaced: true,
state
};
export default mainModule;
const modules = {
other: otherModule,
theme: themeModule
};
const store = new Store({
modules,
});
export default store;
如果我理解正确,那么您遇到的问题是两个单选按钮均已检查效果,这是由Vue无法及时渲染引起的。
因此解决方案是让Vue首先渲染,然后等待承诺。 完成后,再次渲染。
以下是两种方法 :
使用vm.$forceUpdate
提交一个诸如loading...
假值,Vue将首先渲染(Vue是数据驱动的),在出现实际值之后,Vue将再次自动渲染。
以下是一个简单的演示:
Vue.config.productionTip = false const store = new Vuex.Store({ state: { theme: "light" }, mutations: { theme: (s, p) => (s.theme = p) }, actions: { setTheme: async function (context, theme) { return new Promise((resolve, reject) => { setTimeout(()=> { context.commit("theme", theme) resolve('done') }, 1500) }) } } }) new Vue({ el: '#app', store, data() { return { updatedCount: 1 } }, computed: { theme: { get() { return this.$store.state.theme }, set(value) { //or use this.$forceUpdate() instead this.$store.commit("theme", 'loading...') //or other values this.setTheme(value) } } }, updated(){ console.log('updated', this.updatedCount++) }, methods: { ...Vuex.mapActions(["setTheme"]) } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script> <div id="app"> <div> <h3>{{theme}}</h3> <input id="light-theme-radio" v-model="theme" type="radio" value="light"> <label for="light-theme-radio">Light</label> <input id="dark-theme-radio" v-model="theme" type="radio" value="dark"> <label for="dark-theme-radio">Dark</label> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.