Я с трудом пытаюсь обновить состояние моего компонента на основе ссылочного идентификатора, который я использую для отображения результата, который находится в моем магазине / 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;
}
}
});