javascript - 方法函数如何从 vuex 商店调用变量?
问题描述
在我的Vue.js
组件中,我有v-select
元素。当用户在该小部件中选择某个值时,我调用块toDo
中定义的函数。methods
正如您在该函数中看到的那样,我想知道被调用的 getter 的值filters
。不幸的是,它返回了我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
})
})
}
}
}
解决方案
首先 - 如果您提供的 Vuex 代码是您的主要存储(不是模块的一部分),您应该删除namespaced: true,
- 它仅用于 vuex 模块。
如果您提供的 Vuex 代码不是 Vuex 模块的一部分,您应该简单地以这种方式映射 getter:
computed: {
...mapGetters(['filters']),
},
更多信息 - https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace
推荐阅读
- amazon-web-services - 偶尔无法连接到 aws websocket api
- javascript - 如何仅使用 JS、HTML 和 CSS 从 Firebase 检索和显示数据
- c++ - 为什么此代码在计算中间时出现运行时错误?
- php - 在 Docker 中配置 Caddy+PHP
- javascript - 在 onDismiss 处理程序之后重置 div 样式?
- python - 为什么我的 for 循环中的值没有正确附加?
- git - 在 Github 操作中获取提交 SHA
- html - 如何在 html 中的单个 div 内可互换地显示画布和表格?
- linux - 在服务器内如何找到我的 IP 地址
- rust - Cargo 不会从本地依赖项中获取更改。如何调试/修复?