Question

我有一个处于状态的对象数组

  hostInstances :  []

和计算属性

getHostInstances(){
  return this.$store.state.hostInstances
}

最初显示确切数量的对象，但是如果我推送新对象，则vuedev工具会显示状态变化，但计算属性不会改变。

我什至通过计算属性尝试了吸气剂

  ...mapGetters(['getHostInstances' ]);

直接在dom

v-for="instance in $store.getters.getHostInstances"

但它不会更新dom。

Answer 1

将您的state映射到computed。

<template>

  <div v-for="instance in hostInstances">{{ instance }}</div>

</template>

<script>

import { mapState } from `vuex`

export default {

  computed: {

      ...mapState(['hostInstances'])

  }


}

</script>

Answer 2

因为不需要改变状态，所以不需要吸气剂。您可以直接使用Vuex的mapState从商店中获取。您还必须仅在不使用突变时通过突变来修改状态。

import { mapState } from 'vuex';

...
computed: {
   ...mapState(['hostInstances'])
},
methods: {
  addHostInstance() {
    this.$store.dispatch('addHostInstanceAction', yourHostInstanceObj);
  }
}

并在您的商店中...

export default new Vuex.Store({
  state: {...}
  actions: {
    addHostInstanceAction({commit}, payload) {
      commit('mutateInstances', payload);
    }
  },
  mutations: {
    mutateInstances(state, payload) {
      state.hostInstances.push(payload);
    }
  }
})

Vuex状态更新未更新DOM

2 个答案: