[英]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.