[英]How in methods function call variable from vuex store?
在我的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
})
})
}
}
}
在计算的 mapGetters 中,调用一个数组中的所有 getter:
computed: {
...mapGetters(['store', 'filters']),
},
filters
getter 位于您商店的根部; 它不在模块内。 您可以在没有命名空间的情况下访问它:
computed: {
...mapGetters(['filters']),
},
首先 - 如果您提供的 Vuex 代码是您的主要存储(不是模块的一部分),您应该删除namespaced: true,
- 它仅用于 vuex 模块。
如果您提供的 Vuex 代码不是 Vuex 模块的一部分,您应该以这种方式简单地映射 getter:
computed: {
...mapGetters(['filters']),
},
更多信息 - https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.