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 }

现在我有了带有钩子的组件：

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却可以正常工作，所以我认为由于Vue.set(..)，反应性还不错。即使我使用const tmp = this.$store.getters.getNodes（tmp包含整个词典）然后使用tmp2 = tmp[0]，tmp2也不起作用。我不知道为什么。我从Vue开始，所以我感谢如何更改商店设计的提示。

Answer 1

好吧，我发现了一个糟糕的设计解决方案。我只有watcher的变量可以从存储中加载数据，就像const tmp = this.$store.getters.getNodes这样。当tmp发生变化时，我可以通知它并分配变量tmp2 = tmp[number]，以便该行为是被动的。我发现此解决方案很黑。

字典对象的Vue + Vuex反应性

1 个答案: