Ошибка: «[vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций». - PullRequest
Новая
       33

Ошибка: «[vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций».

1 голос
/ 24 сентября 2019

Little Background Story
Я знаю, что это какая-то распространенная ошибка, я просмотрел StackOverflow и не могу найти похожую проблему для себя. Я имею в виду, что технически существует с таким же названием, НО ЭТО НЕ РЕШАЕТ МОЮ ПРОБЛЕМУ.

Следующая проблема не совпадает с моей проблемой, vuex не изменяет состояние хранилища vuex вне обработчиков мутаций

Я прочитал документацию Vuex о том, как она связана с реактивностью vue , но, похоже, она не работает.Я понятия не имел, является ли это проблемой с Vuex или Quasar.Некоторое время я беспокоился об этом, похоже, я упустил что-то простое, но неизвестное мне.

У меня есть следующий файл компонента с именем RouteTabs.vue, использующий QTabs из Quasar 

<template>
  <q-tabs
    :value="tabName"
    @input="SET_TABNAME"
    dense
    no-caps
    inline-label
    indicator-color="white"
    class="bg-blue-10 text-light-blue-2 shadow-2"
  >
    <q-route-tab
      v-for="tab in tabs"
      :key="tab.label"
      :name="tab.name"
      :icon="tab.icon"
      :label="tab.label"
      :to="tab.to"
    />
  </q-tabs>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters('pages/Dashboard', [
      'tabs',
      'tabName'
    ])
  },
  methods: {
    ...mapMutations('pages/Dashboard', [
      'SET_TABNAME'
    ])
  }
}
</script>

И мои модули с именем pages/Dashboard

const state = {
  tabs: [
    { name: 'vehicles', icon: 'time_to_leave', label: 'Vehicles', to: { name: 'dashboard/vehicles' } },
    { name: 'payments', icon: 'account_balance_wallet', label: 'Payments', to: { name: 'dashboard/payments' } },
    { name: 'guests', icon: 'emoji_people', label: 'Guests', to: { name: 'dashboard/guests' } }
  ],
  tabName: 'vehicles'
}

const getters = {
  tabs: state => state.tabs,
  tabName: state => state.tabName
}

const mutations = {
  'SET_TABNAME' (state, tabName) {
    state.tabName = tabName
    // ^ This updates the store successfully,
    // however the error came out same as the title
    // Vue.set(state, 'tabName', tabName) // Same as above
    // state = { ...state, tabName } // This isn't AND IT DOESN'T UPDATE
  }
}

Если вам нужна дополнительная информация, пожалуйста, спросите.Я с удовольствием предоставлю это.Спасибо.

...