Как заставить Vue .set работать прямо во Vuex?

Question

я получаю vuejs ошибку Property or method "selectedVehicule" is not defined on the instance but referenced during render. Make sure that this property is reactive...

я думаю, это исходит от Vue.set, но что я сделал не так

Вот мой файл main. js:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    selectedVehicle: {},
  },
  mutations: {
    setSelectedVehicle (state, selectedVehicle) {
      Vue.set(state.selectedVehicle, 'items', 'dummy1')
      Vue.set(state.selectedVehicle, 'id', 'dummy2')
      Vue.set(state.selectedVehicle, 'kuzzleInfo', 'dummy3')
    }
  }
})

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

И мой файл компонента, где я его читал:

computed: {
    selectedVehicle (val) {
      return this.$store.state.selectedVehicle
    }
  },
  ...

И другой, где я его установил:

computed: {
    selectedVehicule: {
      get: function () {
        return this.$store.state.selectedVehicle
      },
      set: function (newVal) {
        this.$store.commit('setSelectedVehicle', newVal)
      }
    }
  }

Answer 1

Похоже на орфографическую ошибку - вы используете в последнем вычисленном разделе «selectedVehicule» вместо «selectedVehicle». Просто опустите "u".

Answer 2

заполните выбранный автомобиль всеми 3 свойствами в объекте состояния

state: {
    selectedVehicle: {
        items: '',
        id: '',
        kuzzleInfo: ''
    },
}

вы можете попробовать