Vuex getter 不返回当前状态值答案

【问题标题】：Vuex getter does not return current state valueVuex getter 不返回当前状态值
【发布时间】：2019-10-09 04:57:13
【问题描述】：

我在 Vuex 状态中有一个对象，其中包含某些服务器详细信息。 state、mutation 和 getter 如下所示：

// 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 缓存了 getter 响应，并且以后甚至不会调用你的 getter 函数。即使在我手动触发commit()...

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

【问题讨论】：

你如何初始化你的商店？
@Styx 这是一个 nuxt 应用程序；上面的 store/mutations/getters 代码在文件夹 'store/index.js' 中。我在上面添加了 store/index.js 文件的最后一行
在你的突变中尝试state.serverDetails = { ...value }，而不是Vue.set()调用。

标签： vue.js vuex

【解决方案1】：

不过，这并不能解决实际问题（getter 不会在提交时更新）——这种解决方法会强制 Vuex 重新初始化整个状态。

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

commit('SERVER_DETAILS', data)

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

【讨论】：

【解决方案2】：

你使用的Vuex状态不对，应该是一个对象。

const state = {
  serverDetails: {},
}

【讨论】：

我也试过这个，但控制台告诉我'state' should be a method that returns an object in store/index.js - 而且，状态本身正在运行。只有一些 getter 在提交 Ajax 响应时不反映实际的状态值。