Vuex 计算属性未更新答案

【问题标题】：Vuex computed property not updatingVuex 计算属性未更新
【发布时间】：2020-08-11 08:58:00
【问题描述】：

我很难根据我用来显示存储在我的商店/vuex 中的结果的参考 ID 来更新我的组件状态。基本上，我想要发生的是当我更新参考 ID 时，我的 getter/computed 传递更新值。我提供了一个简单的版本，说明我没有运气。有任何想法吗？

我做错了什么？

父组件文件

<template>
 <div class="parent"
   <Car :car="car" />
   <div class="car-btn" @click="switchCarId('11')" >Change Car</div>
 </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Car from './Car.vue';
export default {
  name: 'Car',
  components: { Car },
  computed: {
    ...mapGetters(['car'])
  },
  methods: {
    switchCarId(val) {
      this.$store.commit('updateCarReferenceId', val);
    }
  }
};
</script>

子组件文件

<template>
 <div class="car">{{ car.name }} </div>
</template>

<script>
export default {
  name: 'Car',
  props: { 'car': Object }
};
</script>

存储文件

import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    selectedCarId: '10',
    cars: {
      '10': {
        name: 'Red Car'
      },
      '11': {
        name: 'Blue Car'
      }
    }
  },
  mutations: {
    updateCarReferenceId(state, val) {
      state.selectedCarId = val;
    }
  },
  getters: {
    car: (state, getters) => {
      return getters.cars[getters.getSelectedCarId];
    },
    cars: (state) => {
      return state.cars;
    },
    getSelectedCarId: (state) => {
      return state.selectedCarId;
    }
  }
});

【问题讨论】：

你看过 VueJs DevTools 中的商店了吗？
控制台中是否有任何错误或警告？
是的，根据 Vue 开发检查员的说法，突变被调用和设置。但是我的计算属性没有过滤回来。
一切似乎都很好。你能在 jsfiddle 或 codepen 上创建一个例子吗？
所以你通过 VueJs DevTools 在子组件中看到了一个旧的 prop 值？

标签： vuejs2 vuex getter

【解决方案1】：

我解决了这个问题。结果在一个组件的深处，我正在根据输入更改值。因此，无论状态读取什么，它都只是最初读取它。感谢 Anoatoly 帮助我完成它并确保我点缀了我的 t 和交叉我的 i。

【讨论】：