在 VueX 中存储 JSON 结构答案

【问题标题】：Storing JSON structure in VueX在 VueX 中存储 JSON 结构
【发布时间】：2020-11-29 09:38:21
【问题描述】：

我是 Vue/VueX 的新手，我正在研究一种将 JSON 存储在 VueX 状态的解决方案。起初看起来很简单：

state {
  jsonthing: { ... }
}

问题：getter 返回 Observer 类型，而不是 Object 类型。所以我可以这样做并检索整个 JSON 结构：

getters: {
  getJSON(state) {
    return state.jsonthing;
  }
}

但我无法检索 JSON 的节点或单个值，如下所示：

getters: {
  getOneNode: state =>
    nodeName => {
      return state.jsonthing[nodeName];
    }
  }
}

getter 将state.jsonthing 检索为Observer。我找不到从 Observer 中提取所需 JSON 内容并返回的方法。我知道我可以使用mapState 在我的组件中做到这一点，但这不是我想要的。有没有办法在 getter 中做到这一点？

我目前正在做的是将 JSON 存储为字符串 (JSON.stringify()) 并将其转换回 getter (JSON.parse())。字符串作为字符串检索，而不是Observers。它有效，但它是一个 hack。

虽然我们在这里，但我也找不到Observer 类型的任何文档。如果有人可以删除 URL，我将不胜感激！

【问题讨论】：

标签： javascript typescript vuex

【解决方案1】：

好吧，伙计们，你们今天不是很活跃，所以这里有一个解决方案。如果你知道更好的，请告诉我。

解决方案 1： 使用 JSON.stringify() 将 JSON 转换为字符串并将其存储为字符串。然后 getter 将其转换回 JSON.parse()。这行得通，但确实很丑。

解决方案 2： 生成一个返回 JSON 的函数。这样更好。

state: {
  jsonthing: null
}
mutations: {
  INITIALIZE(state, jsonthing) {
    state.jsonthing = new Function(`return ${ JSON.stringify(jsonthing) }`)
  }
}
getters: {
  getOneNode: state =>
    nodeName => {
      return state.jsonthing()[nodeName];
    }
  }
}

我在 Medium 上写了一篇关于这种方法和一个实际应用（我正在实际实现）的文章。

https://medium.com/developer-rants/simple-dynamic-localization-in-vue-with-vuex-b429c525cd90

【讨论】：