asynchronous - Vuex 状态更改不会触发页面上的反应
问题描述
我正在使用 vue 制作验证码组件。我尝试在创建组件时获取验证码。当我以异步方式执行此操作时,尽管状态已经更新,但页面不会是反应式的。但是我以同步的方式进行操作时,一切都很好。所以,我想知道为什么异步方式不起作用?
这有效
<template>
<section>
<div class="captcha-container">
<div v-if="captcha" v-html="captcha.data"></div>
</div>
</section>
</template>
<script>
import { mapState, mapActions } from "Vuex";
export default {
created: function() {
this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
},
computed: {
...mapState(["captcha"])
},
};
</script>
这不起作用
<template>
<section>
<div class="captcha-container">
<div v-if="captcha" v-html="captcha.data"></div>
</div>
</section>
</template>
<script>
import { mapState, mapActions } from "Vuex";
export default {
created: function() {
setTimeout(() => {
this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
}, 1000);
},
computed: {
...mapState(["captcha"])
},
};
</script>
解决方案
推荐阅读
- python - 查找正态分布的方差
- vba - VBA获取文件夹中最大的文件
- vue.js - 不同实例中的 Vue.JS 函数
- amazon-web-services - 带有奇怪错误的主题的 AWS 策略应用程序失败
- php - PHP检测挂机?
- pandas - Pandas DataFrame 自定义 agg 函数的奇怪行为
- php - PHP 从邮件中保存图像 > 虚假 DQT 索引 12 错误
- reactjs - 我已经尝试安装 expo-cli 好几天了,但仍然无法弄清楚出了什么问题
- python - 期望值:第 1 行第 1 列 (char 0) (django)
- arrays - 如何修复 Leetcode 54. 螺旋矩阵代码中的错误?