方法函数如何从 vuex 商店调用变量？答案

【问题标题】：How in methods function call variable from vuex store?方法函数如何从 vuex 商店调用变量？
【发布时间】：2019-12-23 13:12:27
【问题描述】：

在我的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
        })
      })
    }
  }
}

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

在你的 mapGetters 计算中，调用一个数组中的所有 getter：

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

【讨论】：

您好！我想你误解了这个问题。 mapGetters 安装正确。为什么当我尝试在toDo 函数中使用filters 变量时，我得到undefined 结果。同时在 Vue 的 DevTools 中，我看到 filters 变量具有价值。我希望你能理解我。你有什么想法吗？
我在模板中使用filters，它们显示在界面上。你可以再看看我的帖子。我添加模板。但是在toDo 函数中，同样的filters 返回undefined 结果。我想了解这种奇怪的行为。
我明白了，你在哪里调用toDo函数？
好吧，正如我之前在帖子中所说，我有v-select 元素。我添加了那个小部件，你可以查看帖子。当用户在该小部件中选择某个值时，我会调用在方法块中定义的 toDo 函数。

【解决方案2】：

filters getter 位于商店的根目录；它不在模块内。您可以在没有命名空间的情况下访问它：

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

【讨论】：

您好！我想你误解了这个问题。 mapGetters 安装正确。为什么当我尝试在toDo 函数中使用filters 变量时，我得到undefined 结果。同时在 Vue 的 DevTools 中，我看到 filters 变量具有价值。我希望你能理解我。你有什么想法吗？
我在模板中使用filters，它们显示在界面上。你可以再看看我的帖子。我添加模板。但是在toDo 函数中，同样的filters 返回undefined 结果。我想了解这种奇怪的行为。

【解决方案3】：

首先 - 如果您提供的 Vuex 代码是您的主要存储（不是模块的一部分），您应该删除 namespaced: true, - 它仅用于 vuex 模块。

如果您提供的 Vuex 代码不是 Vuex 模块的一部分，您应该以这种方式简单地映射 getter：

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

【讨论】：

您好！我想你误解了这个问题。 mapGetters 已正确安装。为什么当我尝试在toDo 函数中使用filters 变量时，我得到undefined 结果。同时在 Vue 的 DevTools 中，我看到 filters 变量具有值。我希望你能理解我。我在模板中使用filters，它们显示在界面上没有任何问题。你可以再看看我的帖子。我添加模板。但是在toDo 函数中，同样的filters 返回undefined 结果。我想了解这种奇怪的行为。你有什么想法吗？
看来我们不能在 vue.js 的方法中使用计算的 getter，对吧？！
不，我们可以使用它们。我错过的一件事是您将 async 函数与 await for console.log 一起使用（它返回未定义）？它是干什么用的？尝试删除 async / await
你是对的。起初，我在methods 块中使用了async await 函数。而不是现在我使用简单的功能。它在此更改后起作用。请您将此信息添加到您的帖子中。我会把它标记为正确答案。