Вычисляемое свойство Vuex не обновляется - PullRequest
0 голосов
/ 27 апреля 2020

Я с трудом пытаюсь обновить состояние моего компонента на основе ссылочного идентификатора, который я использую для отображения результата, который находится в моем магазине / vuex. По сути, я хочу, чтобы при обновлении ссылочного идентификатора мои методы получения / вычисления передавали значение обновлений. Я представил простую версию того, что я пытаюсь сделать без удачи. Любые идеи?

Что я делаю не так?

Файл родительского компонента

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

1 Ответ

0 голосов
/ 27 апреля 2020

Я решил эту проблему. Оказывается, в глубине компонента, который я менял, меняли значение, основываясь на входе. Таким образом, независимо от того, что прочитано государством, оно только прочитало это первоначально Спасибо Anoatoly за то, что он помог мне пройти через это и удостоверился, что я поставил точки и пересек свои я.

...