Vuex - 绑定助手中的动态命名空间(mapState,...)

2024-02-04

我正在动态注册 vuex 存储模块

store.registerModule('home.grid', GridStore)

然后在组件中:

export default {
name: 'GridComponent',

props: {
  namespace: {
    type: String,
    required: true
  },

 computed: {
    ...mapState(this.namespace, ['filter']) // doesn't work
    filter() { // more verbose but working
      return this.$store.state[this.namespace].filter
    }
 }
 ...

但我收到错误:

无法读取未定义的属性“命名空间”

任何想法 ?

问题最初是从“gabaum10”这里提出的https://forum.vuejs.org/t/vuex-dynamic-namespaces-in-mapstate-mapactions/28508 https://forum.vuejs.org/t/vuex-dynamic-namespaces-in-mapstate-mapactions/28508


在这里解决https://github.com/vuejs/vuex/issues/863#issuecomment-329510765 https://github.com/vuejs/vuex/issues/863#issuecomment-329510765

{
  props: ['namespace'],

  computed: mapState({
    state (state) {
      return state[this.namespace]
    },
    someGetter (state, getters) {
      return getters[this.namespace + '/someGetter']
    }
  }),

  methods: {
    ...mapActions({
      someAction (dispatch, payload) {
        return dispatch(this.namespace + '/someAction', payload)
      }
    }),
    ...mapMutations({
      someMutation (commit, payload) {
        return commit(this.namespace + '/someMutation', payload)
      })
    })
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuex - 绑定助手中的动态命名空间(mapState,...) 的相关文章

  • 未捕获的 FirebaseError:使用无效数据调用函数 DocumentReference.set()。不支持的字段值:未定义

    我正在使用 Vue 和 Firebase 创建电子商务 尝试添加当前登录用户的一些购物车信息 奇怪的是 第一次信息保存得很好 当我尝试再次添加一些时 那不起作用并显示此错误 未捕获的 FirebaseError 使用无效数据调用函数 Doc
  • vue合成api如何解决命名冲突?

    据说composition api解决了mixin带来的命名冲突 这是我在网上找到的关于composition API的内容 export default setup const someVar1 someMethod1 useCompFu
  • 如果 vue 组件上的模式关闭,如何重置下拉数据?

    我的情况是这样的 我有两个组件 父组件和子组件 我的父组件是这样的
  • Vuex Store 模块访问状态

    我想知道如何从另一个文件访问模块存储 状态 到目前为止 这是我的代码 store index js import Vuex from vuex import categories from modules categories Vue us
  • 如何从 vue.js 上的数据调用方法?

    我的 vue 组件是这样的
  • 为动态创建的组件分离 vuex 存储

    这个问题让我有点卡住了 不幸的是 我在这里找不到答案 问也没有帮助 因此 在做了一些研究并到处询问之后 似乎我找到了这个问题的解决方案 如果您有一个已经知道答案的问题 并且您 希望公开记录这些知识 以便其他人 包括你自己 稍后可以找到它 当
  • 使用 Vue-router 进行 Firebase 身份验证检查

    问题是 vue router 的 beforeEnter 比 main js 中的 beforeCreate 钩子更早触发 并且有第二个延迟 而在重新加载 vuex 操作后将用户设置为状态 这会导致用户被弹回登录页面 如何延迟 vue ro
  • VueJS:无法读取未定义的属性“dispatch”

    我使用 VueJS 和 Vuex 开始我的简单项目 我有一个问题女巫从商店调用方法 当我单击控制台中的按钮时 我看到此错误 Uncaught TypeError Cannot read property dispatch of undefi
  • Vuex getter 未更新

    我有以下吸气剂 withEarmarks state gt var count 0 for let l of state laptops if l earmarks length gt 0 count return count 在组件中 这
  • 在自定义指令中模拟 v-if 指令

    我需要销毁 v if 等自定义指令中的元素 如果条件失败 则禁止创建项目 我尝试这个 export const moduleDirective DirectiveOptions DirectiveFunction el binding vn
  • 如何在Vuex中存储非响应式数据?

    我有数据 在 VueJS 应用程序初始化之前加载到页面上一次 并且该数据不会一直更改 而 html 页面不会重新加载 经典 CGI 应用程序 而不是 SPA 数据示例 const nonReactiveObjectWithSomeNeste
  • VueJS - Vue 未定义

    我挑战自己编写一个应用程序 从 API 获取数据并将其显示在各种组件中 我对 VueJS 还很陌生 我使用 VueResource 来访问 API 使用 VueX 来进行状态管理 我已经设置了我的商店 我添加了操作 突变和吸气剂等 一旦我添
  • Vue DOM 对计算属性没有反应

    我有一个按钮 如果计算属性的有效属性为 false 则该按钮设置为禁用 如果为 true 则应启用该按钮并允许用户移至当前流程中的下一步 我的 currentStep 计算属性正在根据当前步骤输入的更改完美更新 但按钮 disabled c
  • 使用 Vuex 突变更新对象引用的正确方法是什么?

    当对象引用传递到 Vue 子组件时 并且我想更新对象属性之一的值 使用 Vuex 最简单的方法是将对象引用和新值传递给突变 然后 突变只是更新传递对象的属性 这是合法的吗 这似乎有点太简单了 而且接近冗余 因为我可以在组件本身中进行重新分配
  • 使用 Vue 3 Composition API 创建全局商店

    我正在尝试仅使用 Vue 3 Composition API 创建一个全局商店 到目前为止 我一直在做实验 并且阅读了很多如何使用 Composition API 但知道我不知道如何使用provide和inject 我所知道的是provid
  • Vuex - 多次调度后运行函数

    我正在创建一个应用程序 在某个时刻我需要加载一些数据 但为了让用户看不到损坏的数据 我插入了一个加载组件 目前 我在负载中放置了 setTimeout 但在某些时候 API 响应可能需要超过 1 秒 所以我想仅在所有调度完成时更新加载状态
  • 如何重新加载 vue 组件?

    我知道解决方案是像这样更新道具数据 this selectedContinent 但我想使用另一种解决方案 在我阅读了一些参考资料后 解决方案是 this forceUpdate 我尝试了一下 但不起作用 演示和完整代码如下 https j
  • Vue.use() 抛出“无法读取未定义的属性‘use’”

    尝试1 main js import createApp from vue import store from store store import App from App vue Vue config productionTip fal
  • 如何在 Nuxt.js 中设置 beforeResolve 导航防护

    有没有办法在 nuxt config js 中添加 beforeResolve 导航防护 我的 nuxt config js module exports router beforeResolve to from next if this
  • Vue.js 严格模式下不允许对一个属性进行多个定义

    再会 我们正在使用 Vuejs Vuex vue router 构建我们的应用程序https github com vuejs vue hackernews 2 0 https github com vuejs vue hackernews

随机推荐

  • 使用 Cx_freeze 或 Py2Exe 打包 Scrapy 应用程序

    我正在尝试打包一个网络抓取脚本 使用 scrapy 构建 作为独立应用程序运行 供我的老板使用 我使用 Tkinter 构建了一个小型桌面 GUI 它通过 os system 调用来调用我的 Scrapy 蜘蛛 我当前的构建实现 使用 cx
  • VHDL 中的 BRAM_INIT

    我正在模拟基于处理器的设计 其中程序存储器内容保存在 BRAM 中 我正在使用 VHDL 推断 BRAM 实现程序存储器 我试图避免使用 CoreGen 因为我想保持设计的可移植性 最终该设计将进入 FPGA 我想看看是否有一种方法可以使用
  • 如何集成Pygame和PyQt4?

    我正在使用 python 2 7 和 Ubuntu 14 04 我正在尝试做this http www pygame org docs ref display html pygame display init为了让我的 pygame 窗口位
  • 从源文件中删除所有注释(单行/多行)和空行[重复]

    这个问题在这里已经有答案了 如何从 C 源文件中删除所有注释和空行 请记住 可能存在嵌套注释 一些例子 string text not a comment a comment multiline comment string newText
  • 在脸部周围绘制精美的矩形

    我使用以下代码来检测脸部并在脸部顶部绘制矩形 while True get video frame ret img cap read input img cv2 cvtColor img cv2 COLOR BGR2RGB img h im
  • MvvmCross - 如何将 UIView.Layer.AnyProperty (Xamarin.iOS) 绑定到视图模型上的属性?

    我在视图模型上有一个名为 BorderColor 的字符串类型的属性 我尝试将其绑定到 UIView Layer BorderColor 这是绑定语法 set Bind this MyUIView For Layer BorderColor
  • Xcode 源自动格式化

    As a C developer I have become highly dependent on the automatic formatting in Visual Studio 2008 Specifically I will us
  • 从 mysql_connect() 获取 PHP PDO 连接?

    我有一个旧版 PHP MySQL 应用程序调用 mysql connect 大量现有的下游代码使得mysql query 使用此连接直接或通过包装器进行调用 对于我在应用程序上开发的新代码 我想开始使用 PDO 如果我使用相同的主机 用户
  • “DataLoader”对象不支持索引

    我已经通过此 pytorch api 通过设置 download True 下载了 ImageNet 数据集 但我无法迭代数据加载器 错误显示 DataLoader 对象不支持索引 trainset torch utils data Dat
  • 调用mapViewDidFailLoadingMap委托方法时出现错误== 0

    在我的视图控制器中 我创建了一个 MKMapView 对象 我将委托设置为 self 并在 ViewController 中实现 void mapViewDidFailLoadingMap MKMapView mapView withErr
  • Spring data - 根据先前的插入插入数据

    我需要将数据保存到两个表中 一个实体和一个关联表 我只是用以下命令保存我的实体save 我的实体存储库中的方法 然后 为了性能 我需要将行插入到关联表中原生sql 这些行有我之前保存的实体的引用 问题来了 我得到一个完整性约束异常关于外键
  • jQuery - 窗口焦点、模糊事件未触发 - 适用于 Firefox 和 Chrome

    简而言之 我编写了一个简单的聊天应用程序供我和我的朋友使用 当运行应用程序的窗口没有焦点 最小化或位于其他窗口后面 并且出现消息时 我想更改窗口标题栏以充当警报 就像 Google 的聊天应用程序在 GMail 中所做的那样 在 Firef
  • 如何在 Phpunit 的静态提供程序中创建测试双打?

    Phpunit 10 已弃用非静态测试提供程序 这使得在提供者内部创建测试替身成为问题 因为像这样的方法createMock or createStub 不是静态的 这是一个演示该问题的假测试 public function provide
  • 在单独的线程中执行操作以解锁 UI

    我有一个用于生成报告的表格 我们正在使用RDLC报告并且报告被加载到aspx page 所以这是代码Form 表单目标设置为 blank 并在新选项卡中打开 using Html BeginForm AssetReports AssetRe
  • 根据常识,什么是正确的: (int) blabla * 255.99999999999997 或 round(blabla*255)?

    最近我在 webkit 源代码中发现了这个有趣的事情 与颜色转换 hsl 到 rgb 相关 http osxr org android source external webkit Source WebCore platform graph
  • MongoDB 中多租户数据库的推荐方法是什么?

    我正在考虑使用 MongoDB 创建一个多租户应用程序 我还没有猜测我会有多少租户 但我希望能够扩展到数千个 我可以想到三种策略 同一集合中的所有租户 使用特定于租户的字段来确保安全 单个共享数据库中每个租户 1 个集合 每个租户 1 个数
  • 使用 python 从 LaTeX 文件中提取特定部分

    我有一组 LaTeX 文件 我想为每个提取 抽象 部分 begin abstract end abstract 我已经尝试过这里的建议 如何解析LaTex文件 https stackoverflow com questions 307523
  • 方法的多个返回类型

    我正在尝试用 Rust 编写一个简单的电视剧文件重命名器 文件名被解析 并且可能是多种类型之一 基于日期 基于季节 剧集编号等 然后 此解析后的文件将转换为包含数据库中数据的 填充文件 然后将其格式化为新文件名 最初我尝试让parse方法采
  • DB PHP 中的条目数

    我正在创建一个函数来显示现在有多少用户在线 这是基于过去 5 分钟内打开页面的人 每个页面加载都保存到我的数据库中 如下所示 目前我有以下代码 query mysql query SELECT user id timestamp FROM
  • Vuex - 绑定助手中的动态命名空间(mapState,...)

    我正在动态注册 vuex 存储模块 store registerModule home grid GridStore 然后在组件中 export default name GridComponent props namespace type