Vuex计算属性未更新

Question

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

我在做什么错？

父组件文件

<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;
    }
  }
});

Answer 1

我解决了这个问题。原来，在要更改的组件中，我根据输入更改了值。因此，无论读取什么状态，它都只会在最初读取它。感谢Anoatoly帮助我完成了它，并确保我点了t并横穿了i。