- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
如何将参数传递给 mapGetters
中的 getter
?这是同时对 widgetFetched.posts
和 posts
的状态变化使用react的正确方法吗?换句话说,我的 getter
可以对这些变化使用react吗?
我正在尝试通过 getter
让我的组件对 Vuex Store
中的 State
变化使用react。为此,我在我的组件中使用了 mapGetters
。但是这个 getter
接收一个参数,一个 id
来过滤我的状态(即展平)。
我有两个状态(即字典):widgetsFetched
和 posts
。一个 widgetFetched
有一个名为 posts
的属性,它是一个 Post.Id
数组。状态 posts
是一个字典,其键是 Post.Id
。
因此,我有一个名为 getPostsByWidgetId
的 getter
,它接受一个参数 widgetId
。然后,我的 getter
返回一个数组,其中包含由 widgetFetched.posts
的 ID 过滤的帖子。
const store = new Vuex.Store({
state: {
widgetsFetched: {
1: { id: 1, done: true, posts: [1, 2, 3, 4] },
2: { id: 2, done: false, posts: [5, 6] }
},
posts: {
1: { name: '...', id: 1, content: '...' },
2: { name: '...', id: 2, content: '...' },
3: { name: '...', id: 3, content: '...' },
4: { name: '...', id: 4, content: '...' },
5: { name: '...', id: 5, content: '...' },
6: { name: '...', id: 6, content: '...' }
}
},
getters: {
getPostsByWidgetId: (state, getters) => (widgetId) => {
if (widgetId && state.widgetsFetched[widgetId] && state.widgetsFetched[widgetId].posts) {
return state.widgetsFetched[widgetId].posts.map((postId) => {
return state.posts[postId]
})
}
}
}
})
我的组件看起来像:
<template>
<div>
<p v-for="post in posts(this.widget._id)" >{{ post.id }} - {{ post.score }}</p>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'reddit',
props: ['widget'],
computed: {
...mapGetters({
posts: 'getPostsByWidgetId'
})
}
}
</script>
<style scoped>
</style>
最佳答案
目前,mapGetters
不支持传递参数。但是你可以用这段代码达到类似的效果:
computed: {
posts() {
return this.$store.getter.getPostsByWidgetId(this.widget._id)
}
}
关于javascript - VueJS : React to State change through mapGetters receiving arguments,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46484382/
我用 vuex和 mapGetters我的组件中的 helper 。我得到了这个功能: getProductGroup(productIndex) { return this.$store.get
我正在使用 vuex 来管理我的应用程序中的状态,并以一种方式与我的表单进行绑定(bind)。 import { mapGetters } from 'vuex' import store
如果我们使用带有标签的 vuex,我们如何包含 mapGetters 帮助器 关于javascript - 包含来自 vuex 的 mapGetters,我们在Stack Overflow上找到一
美好的一天。 我在我的 vue.js 项目中使用模块。现在我需要从 getter 中获取过滤后的数据,但不要理解如何提供参数。 我想为 Getter 提供“名称”参数。我如何在 Component.v
所以我相信标题介绍了我的问题。鉴于您要在每个要使用 mapGetters 的组件中引入新的依赖项,这会增加您的包的膨胀。 这也意味着您的组件现在专门绑定(bind)到 Vue,如果您将组件移植到另一个
我正在使用来自 VueX 的 mapGetters 帮助程序,但我只在页面的第一次加载时遇到一些问题,它不是 react 性的......让我告诉你: 我的 html 模板触发了更改: 我的商店收到
我在 store/index.js 中添加了模块 import NavMessage from './nav/message/index'; new Vuex.Store({ modules: {
我现在正在学习 vuex,但我陷入了映射功能,例如 import { mapGetters } from 'vuex'; 在我的状态下,我有一个名为 users 的对象,我在其中保存用户数据,稍后将添
每当你想使用来自 Vuex 的 mapGetter 助手的计算 getter 时,你可以像这样使用它: ...mapGetters([ 'getter1', 'getter2',
有人知道如何在mapState函数中将mapGetters或Vue 3与setup一起使用吗? 我知道可以将商店与useStore Hook 一起使用,但是通过此 Hook ,我们可以导入所有商店,而
我开始制作一个通用输入 vue 组件。在担心更改输入中的数据之前,我只想从存储中获取初始值。 我有这样的东西: import store from '@/store/index'; exp
我有很多将参数传递给商店的 getter,例如: this.$store.getters['getSomeThing'](this.id) 而且我没有找到关于如何最佳地使用 mapGetters 来保
是否可以使用 mapGetters 传递参数? 我在主 Vue 实例中有这个: computed: { filterAuthors() { return this.$sto
当使用 mapGetters 时,TypeScript 无法看到绑定(bind)到 Vue 组件的 getter 是什么,因此它会抛出错误。示例: import Vue from 'vue'; imp
我有一个带有 getter 的 vuex 模块。我在 vue 组件中使用这个模块的 getters: ... computed: { ...mapGetters('myCoolModule',
我有一个带有 getter 的 vuex 模块。我在 vue 组件中使用这个模块的 getters: ... computed: { ...mapGetters('myCoolModule',
问题 如何将参数传递给 mapGetters 中的 getter?这是同时对 widgetFetched.posts 和 posts 的状态变化使用react的正确方法吗?换句话说,我的 getter
我想知道 mapGetters 的语法是什么,当我想给它一个自定义名称并在我的模板中使用这个自定义名称而不是 getters 名称来访问它时。 const store = createStore({
我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点: import { defineComponent, computed } from 'vue'; imp
我的组件模板: Stage {{stage}} Total Hrs: {{totalHours}} S
我是一名优秀的程序员,十分优秀!