javascript - 字典对象的 Vue + Vuex react 性

Question

我正在使用 Vue + Vuex 来管理状态。

让我们有商店:

state: {
  nodes: {}
},
actions: {
  loadNodes ({ commit }, parameter) {
     axios.get('http://URL' + '/nodes', {
        params: {
          name: parameter['name'],
          type: parameter['type']
        }
      }).then((response) => {
        commit('nodeActivity', { uid: parameter['uid'], res: response.data })
    })
  }
},
mutations: {
  nodeActivity (state, data: {uid, res}) {
    Vue.set(state.nodes, data.uid, data.res)
  }
},
getters: {
  getNodes: state => state.nodes
}

这可能没问题，在nodes中有一个字典结构{ id: data }

现在我有了带钩子(Hook)的组件:

created () {
    this.$store.dispatch('nodeActivity', { uid: this.$props.uid, name: this.$props.namepar, type: this.$props.typepar })
  } 

因此 API 调用获得了一些数据并且是异步存储的。有用。但我需要获取特定的 uid 之类的东西，例如 this.$store.getters.getNodes[0] 不起作用，但 this.$store.getters.getNodes 正常工作，所以我认为 react 性还可以，这要归功于 Vue.set(..)。即使我使用 const tmp = this.$store.getters.getNodes(tmp 包含整个字典)然后使用 tmp2 = tmp[0] , tmp2 不是 react 性的。 我不知道为什么。 我刚开始使用 Vue，所以我很欣赏如何更改商店设计的提示。

Answer 1

好吧，我找到了一个糟糕的、可能不符合设计的解决方案。 我只有 watcher 用于从存储加载数据的变量，类似于 const tmp = this.$store.getters.getNodes。当 tmp 更改时，我可以通知并分配变量 tmp2 = tmp[number] 因此行为是 react 性的。我发现这个解决方案很老套。