javascript - mapGetters 的反应性问题仅在第一次加载时
问题描述
我正在使用mapGetters
VueX 的帮助程序,但我仅在页面的第一次加载时遇到了一些问题,它不是反应式的......让我告诉你:
我的 html 模板触发了更改:
<input type="number" value="this.inputValue" @change="this.$store.dispatch('setInputValue', $event.target.value)">
我的商店收到价值
{
state: {
appValues: {
inputValue: null
},
},
getters: {
getInputValue: (state) => {
return state.appValues.inputValue;
},
},
mutations: {
setInputValue(state, value) {
state.appValues.inputValue = value;
},
},
actions: {
setInputValue(context, payload) {
return new Promise((resolve, reject) => {
context.commit('setInputValue', payload);
resolve();
});
},
}
}
然后我的组件监听商店:
import {mapGetters} from 'vuex';
computed: {
...mapGetters({
inputValue: 'getInputValue',
}),
}
watch: {
inputValue: {
deep: true,
immediate: true,
handler(nVal, oVal) {
console.log("inputValue", nVal, oVal);
}
},
}
所以现在,当我第一次加载页面时,我得到了这个 console.log "inputValue" null undefined
,这是完全正常的,因为我的商店里什么都没有,它给了我默认值null。
但现在是奇怪的部分。我开始更改输入值,但我的控制台中没有任何内容。什么都没有动...
然后我重新加载页面并在加载时得到这个console.log "inputValue" 5 undefined
(5是我之前输入的值)所以你可以看到,当我之前更改输入时,它很好地保留了存储中的值但是计算价值没有自我更新......
Ans 现在,当我更改输入的值时,我的控制台日志是这样"inputValue" 7 5
的,所以它可以正常工作,因为我希望它从一开始就可以工作......
我做错了什么?为什么在第一次加载时计算值没有反应?
谢谢你的回答...
解决方案
我认为解决这个问题的最好方法是用一个观察者存储一个局部变量,然后在本地改变时更新vuex:
在您的组件上:
<input type="number" v-model="value">
data() {
return {
value: ''
};
},
computed: {
...mapGetters({
inputValue: 'getInputValue'
})
}
watch: {
value(value){
this.$store.dispatch('setInputValue', value);
},
inputValue(value) {
console.log('inputValue', value);
}
},
created() {
// set the initial value to be the same as the one in vuex
this.value = this.inputValue;
}
推荐阅读
- scala - 在 SPARK 数据框中,我想 groupBy,然后 orderBY 并且它们连接另一列的行
- c++ - Why the C++ code couldn't display bitmap?(code from textbook)
- javascript - 用于更大传输的 Nodejs 套接字发射
- java - 如何在editText中放置一个按钮
- ruby - Stripe 在 macbook localhost 上失败,但在 iMac localhost 上工作
- python - 从请求正文 django 访问数据
- android - VectorDrawable 以像素显示
- javascript - Query.formatError 的“where 子句”中的未知列“users.email”
- c# - 实体查询中的 If Else 语句
- gitlab - Gitlab问题-可以自动创建吗