简体   繁体   English

如何在方法函数中调用 vuex 存储中的变量?

[英]How in methods function call variable from vuex store?

In my Vue.js component, I have v-select element.在我的Vue.js组件中,我有v-select元素。 When the user selects some value in that widget I call toDo function which is defined in methods block.当用户在该小部件中选择某个值时,我调用methods块中定义的toDo函数。 As you can see in that function I want to know the value of the getter called filters .正如您在该函数中看到的,我想知道名为filters的 getter 的值。 Unfortunately, it returns me undefined .不幸的是,它返回给我undefined At the same time in DevTools of Vue I notice that this getter has value.同时在 Vue 的 DevTools 中我注意到这个 getter 是有价值的。 How in function correctly take the value of the getter?如何在函数中正确获取 getter 的值?

QUESTION:题:

I use filters in the template and they are displayed on the interface without any problem.我在模板中使用filters ,它们显示在界面上没有任何问题。 But in toDo function, the same filters return undefined result.但是在toDo函数中,相同的filters返回undefined结果。 I want to understand this strange behavior.我想了解这种奇怪的行为。

<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 Storage : 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
        })
      })
    }
  }
}

In your mapGetters computed, call all getters inside a one Array:在计算的 mapGetters 中,调用一个数组中的所有 getter:

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

The filters getter is at the root of your store; filters getter 位于您商店的根部; it's not inside a module.它不在模块内。 You can access it without namespacing:您可以在没有命名空间的情况下访问它:

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

At first - if Vuex code you provided is your main store (not a part of a module) you should remove namespaced: true, - it is used solely for vuex modules.首先 - 如果您提供的 Vuex 代码是您的主要存储(不是模块的一部分),您应该删除namespaced: true, - 它仅用于 vuex 模块。

and if Vuex code you provided is not part of a Vuex module you should simply map getters this way:如果您提供的 Vuex 代码不是 Vuex 模块的一部分,您应该以这种方式简单地映射 getter:

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM