Question

我有一个管理数组（state.all）的Vuex存储，还有一个按钮，该按钮调用Vuex操作，该操作执行HTTP调用，然后将响应中的数据附加到state.all通过突变。但是，状态永远不会更新，组件也永远不会更新。

为了证明我并不疯狂，我在突变内部使用了两个alert()，以确保我知道自己在代码中的位置。 alert()始终使用适当的值触发。

这是截断的Vuex存储（这是一个模块）：

const state = {
    all: []
}

// actions
const actions = {
    ...
    runner ({ commit, rootState }, { did, tn }) {
       HTTP.post(url, payload)
           .then(function (response) {
               commit('setNewConversations', response.data)
           })
       })
    }
}

const mutations = {
    ...
    setNewConversations(state, new_conv) {
        for (let new_c_i in new_conv) {
            let new_c = new_conv[new_c_i]
            alert(new_c) // I always see this, and it has the correct value
            if (!(new_c in state.all)) {
                alert('I ALWAYS SEE THIS!') // testing
                state.all.push(new_c)
            }
        }
    }
    ...
}

当我进行测试时，我看到了两个alert()，第一个具有我期望的值，第二个具有“我总是会看到这个！”。但是我的v-for组件什么也没有发生，尽管有state.all.push()，状态也从未更新。

解决此问题的下一步是什么？ JS控制台中没有错误，而且我无法弄清状态不会更新的任何原因。

谢谢！

Answer 1

一种可能的解决方案是，不推送到当前状态值，而是将先前的state.all值存储在新数组中，然后将新更改推送到该新数组中。

完成后，将新数组分配给state.all，如下所示。

 setNewConversations(state, new_conv) {
    const prevState = [...state.all];
    for (let new_c_i in new_conv) {
        let new_c = new_conv[new_c_i]
        if (!(new_c in prevState)) {
          prevState.push(new_c);
        }
    }
    state.all = prevState;
}

Answer 2

鉴于您说删除警报使其可以工作，这使我想知道您是否只是在错误的位置观察值。我不能确定您给的是什么。

请记住，Javascript是单线程的，必须先完成您的变异，然后才能运行任何其他注入Vue的反应性代码。

如果您确实希望在完成变异之前显示该值，则可以调用Vue.nextTick(() => alert(...))，但更好的答案是检查其他地方的更新，例如在调用getter的计算机中用于state.all数组。

（顺便说一下，我发现使用console.log(...)或vue-dev-tools进行alert()的调试要快得多。）

Vue.js Vuex状态永远不会使用push（）更新

2 个答案: