Javascript 仅在首次加载时使用Mapgetter的反应性问题

我正在使用VueX的

mapGetters

帮助程序，但我只是在第一次加载页面时遇到了一些问题，它不是被动的。。。 让我告诉你：

触发更改的我的html模板：

我的商店收到的价值

{
    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

但现在是奇怪的部分。我开始更改输入值，但控制台中没有显示任何内容。没有任何东西在移动

然后我重新加载页面，在加载时我得到了这个控制台。log

“inputValue”5未定义（5是我以前输入的值），因此您可以看到，当我以前更改输入时，它很好地将值保留在存储中，但计算值本身没有更新

Ans现在，当我更改输入值时，我的控制台日志如下所示
“inputValue”7 5
，因此它从一开始就可以正常工作

我做错了什么？为什么在第一次加载时，计算值不是无功的

感谢您的回答…
我认为解决此问题的最佳方法是使用监视程序存储局部变量，然后在局部变量更改时更新vuex：

在您的组件上：



请看一下这个示例：

您的错误是，您在模板中使用了
这个
关键字。在模板代码中不应使用
此

<input
      type="number"
      value="inputValue"
      @change="$store.dispatch('setInputValue', $event.target.value)"
    >



额外提示：使用getter返回默认状态是多余的
如果可以使用
mapState
返回状态

模板中有一些小错误。应该是这样的：



我已经在几个地方删除了
这个。
并在
值的前面放了一个
：
。一旦我做了这些改变，一切都按预期进行。
this.$store
导致我在使用Vue 2.6.10时出现控制台错误

我想补充一点，您正在使用
change
事件。这是标准的DOM
change
事件，在字段模糊之前不会触发。因此，如果您刚开始键入，您将不会在控制台中看到任何事情发生。如果希望在每次击键时更新输入，最好使用
input
。或者，您可以使用带有getter和setter的
v-model
（请参阅）

我的怀疑是，当您重新加载触发更改事件的页面时，因为它模糊了字段。
好的，所以。。。我发现了这个问题，但它与我的示例无关，我无法真正解释原因，但我将尝试解释如何：

在我的商店里，我有下一种方法：

mutations: {
    deleteAppValues(state) {
        state.appValues = null;
    }
}

我在注销时使用了这个，或者当用户第一次进入页面时没有登录。。。发生了什么事

用户首先加载页面，存储初始化良好，索引
inputValue
初始化为空值，因此它存在
。。。但是由于用户没有登录，我破坏了存储，所以现在inputValue不等于null，它根本不存在

尝试在不存在的东西上使用
mapGetters
，反应性将不起作用，因此如果我发送更改，将创建存储密钥，但由于mapGetters是用不可抗拒的密钥初始化的，它不会侦听反应性
在重新加载页面后，密钥现在存在于存储中，因此getter可以附加到它，因此现在一切正常
这正是我的代码出了什么问题的解释。。。所以为了让它正常工作，我把我的密码改为：

mutations: {
    deleteAppValues(state) {
        state.appValues = {
            inputValue: null,
        };
    }
}

这样，store对象的inputValue键将始终存在，因此getter不会失去反应性

我试图提出一个简单简洁的问题，但这让我忘记了代码中不好的部分，对不起
 这完全是我的错，我在这里写的代码不是很好。。。但这并没有改变任何事情。。。我真正的问题确实来自
标记，但我不想写选项和所有内容，我尝试了输入和相同的问题，因此我决定将输入方式放在我的问题中，以便更简洁…谢谢你的回答，但它在我的情况下不起作用，它根本不会改变任何东西…-\u-哦，顺便说一句，如果我使用mapGetter，那是因为在我的实际项目中（我给出的代码只是我所有代码的一份简历），Getter很重要，因为我可以创造一些我在项目中无法实现的条件和逻辑State@SimonTrichereau很酷，如果您想使用getter获取条件数据是state。那就好了。你能在codepen或codesandbox中创建一个代码示例，以便我帮助你解决问题。谢谢你，我已经这样做了，是的，它可以工作，但问题更像是我的存储中有大量变量，因此如果我必须复制每个变量，那将是浪费时间。。。映射器应该工作得很好。。。
mutations: {
    deleteAppValues(state) {
        state.appValues = {
            inputValue: null,
        };
    }
}