Question

小背景故事
我知道这是一些常见的错误，我查看了StackOverflow，但似乎找不到类似的问题。 从技术上讲，我的意思是标题相同，但不能解决我的问题。

以下问题与我的问题vuex do not mutate vuex store state outside mutation handlers

不同

我已经阅读了Vuex文档，它与vue's reactivity有何关系，但似乎不起作用。我不知道这是Vuex还是Quasar的问题。我已经困扰了一段时间了，好像我错过了一些简单但我不知道的事情。

我有以下名为RouteTabs.vue的组件文件，使用的是QTabs from 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
  }
}

如果您需要更多信息，请询问。我会很乐意提供。谢谢。

错误：“ [vuex]不会在变异处理程序之外变异vuex存储状态。”

0 个答案: