如何在方法函數中調用 vuex 存儲中的變量？

Question

在我的Vue.js組件中，我有v-select元素。 當用戶在該小部件中選擇某個值時，我調用methods塊中定義的toDo函數。 正如您在該函數中看到的，我想知道名為filters的 getter 的值。 不幸的是，它返回給我undefined 。 同時在 Vue 的 DevTools 中我注意到這個 getter 是有價值的。 如何在函數中正確獲取 getter 的值？

題：

我在模板中使用filters ，它們顯示在界面上沒有任何問題。 但是在toDo函數中，相同的filters返回undefined結果。 我想了解這種奇怪的行為。

<div
    v-for="filter in filters"
    :key="filter.id">
    <v-checkbox
        v-for="(item, index) in filter.values"
        :label="filter.description_values[index]"
        :value="item"
        :key="item"
        v-model="filter.selected_values"
        hide-details>
    </v-checkbox>
    <v-select
        v-if="filter.widget==='single_dropdown'"
        v-model="filter.selected_values"
        :items="filter.filter_values"
        label="Select ..."
        dense
        solo
        @change="toDo">
    </v-select>
</div>

***
computed: {
  ...mapGetters('store', [
    'filters'
  ]),
},
methods: {
  toDo: async (value) {
    await console.log(this.filters) // result: undefined
  }
}
***

Vuex 存儲：

import { api } from '../../services/api'

export default {
  namespaced: true,
  state: {
    filters: null
  },
  getters: {
    filters: state => state.filters
  },
  mutations: {
    setStateValue: (state, {key, value}) => {
       state[key] = value
    }
  },
  actions: {
    getFilters: async (context) => {
      await api.get('/api/filters').then((response) => {
        context.commit('setStateValue', {
          key: 'filters',
          value: response.data
        })
      })
    }
  }
}

Answer 1

在計算的 mapGetters 中，調用一個數組中的所有 getter：

computed: {
  ...mapGetters(['store', 'filters']),
},

Answer 2

filters getter 位於您商店的根部； 它不在模塊內。 您可以在沒有命名空間的情況下訪問它：

computed: {
  ...mapGetters(['filters']),
},

Answer 3

首先 - 如果您提供的 Vuex 代碼是您的主要存儲（不是模塊的一部分），您應該刪除namespaced: true, - 它僅用於 vuex 模塊。

如果您提供的 Vuex 代碼不是 Vuex 模塊的一部分，您應該以這種方式簡單地映射 getter：

computed: {
  ...mapGetters(['filters']),
},

更多信息 - https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace