Question

在我的Vue.js组件中，我有v-select元素。当用户在该小部件中选择某个值时，我将调用toDo块中定义的methods函数。正如您在该函数中看到的那样，我想知道称为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中，在一个Array中调用所有getter：

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

Answer 2

filters吸气剂位于商店的根目录；它不在模块内部。您无需命名即可访问它：

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

在方法中如何从Vuex存储调用函数？

3 个答案: