Question

我在Vuex状态内有一个带有某些服务器详细信息的对象。状态，突变和吸气剂如下所示：

// Code inside store/index.js of the nuxt application

const state = () => ({
  serverDetails: {}
})

const mutations = {
  SERVER_DETAILS(state, value) {
    Vue.set(state, 'serverDetails', value)
  }
}

const getters = {
  getServerDetails(state) {
    console.log('GETTER: get details')
    return state.serverDetails
  }
}

export { state, mutations, getters }

这些详细信息是通过axios Ajax调用在浏览器中初始化的，该调用在完成后执行commit()，例如

commit('SERVER_DETAILS', data)

现在，我尝试在浏览器控制台中访问这些详细信息，但得到不同的结果。
在浏览器控制台内部：

Output in the console during initial page load:
  GETTER: get details

> $store.state.serverDetails.timezone
  Output: 7200

> $store.getters.getServerDetails.timezone
  Output: undefined

> $store.commit('SERVER_DETAILS', {timezone: 123})
> $store.state.serverDetails.timezone
  Output: 123

> $store.getters.getServerDetails.timezone
  Output: undefined

由于输出GETTER: get details仅在页面加载时显示一次，因此Vuex似乎会缓存getters响应，甚至以后都不会调用geter函数。即使在我手动触发commit() ...

之后，

问题：我在这里做错了吗？为什么在直接访问状态时，getter为什么返回空对象？

Answer 1

但是，这不能解决实际的问题（提交时不会更新getter）-这种解决方法迫使Vuex 重新初始化整个状态。

我已将此代码添加到axios ajax响应处理程序中，该处理程序在每个会话中仅发生一次：

commit('SERVER_DETAILS', data)

$store.hotUpdate($store.state) // <<-- This line is new.

Answer 2

您使用的Vuex状态错误，应该是一个对象。

const state = {
  serverDetails: {},
}

Vuex Getter不返回当前状态值

2 个答案: