首页 > 其他分享 >Vuex module之间调用与读值

Vuex module之间调用与读值

时间:2023-04-13 10:35:25浏览次数:38  
标签:someMutation getters module 读值 state someOtherGetter someGetter Vuex rootGetters

  • 对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象state
  • 对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState
  • 使用全局 state 和 getter,rootState 和 rootGetters 会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action
  • 在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatch 或 commit 即可
// module a
const moduleA = {
  namespaced: true,
  state: () => ({
    count: 0
  }),
  mutations: {
    someMutation(state){}
  },
  getters: {
      // 在这个模块的 getter 中,`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中, dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters, rootState  }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'
        rootState.user.userId // -> 'user.userId'
        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('user/someMutation', null, { root: true }) // -> 'user/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
}


// module user
const moduleB = {
  namespaced: true,
  state: () => ({
    userId: '',
    name: ''
  }),
  mutations: {
    someMutation(state){}
  },
  getters: {},
  actions: {}
}

标签:someMutation,getters,module,读值,state,someOtherGetter,someGetter,Vuex,rootGetters
From: https://www.cnblogs.com/gongxiansheng/p/17312398.html

相关文章

  • MODULE_DEVICE_TABLE
    __attribute__((alias(__stringify(A))))  设置函数、变量的别名#include<stdio.h>#define__stringify_1(x...)#x#define__stringify(x...)__stringify_1(x)voida(intn)__attribute__((alias(__stringify(A))));//voidsys_socket(intn)__attribute__((alia......
  • vuex store
    一,vuex:状态管理(集中式存储应用的所有组件的状态)vuex是vue的插件store:商店二,vuex有那些属性staste:{}-------------用来放数据的,类似于组件中的datagetters:{}-------------就是一个计算属性[类似于组件中的computed]mutations:{}-----------就是一个存放方法的[类似......
  • 网络框架重构之路plain2.0(c++23 without module) 综述
    最近互联网行业一片哀叹,这是受到三年影响的后遗症,许多的公司也未能挺过寒冬,一些外资也开始撤出市场,因此许多的IT从业人员加入失业的行列,而且由于公司较少导致许多人求职进度缓慢,很不幸本人也是其中之一。自从参加工作以来,一直都是忙忙碌碌,开始总认为工作只是为了更好的生活,但是一......
  • 解决ModuleNotFoundError: No module named ‘numpy.core._multiarray_umath‘的方法
    1,卸载numpy,pip3uninstasllnumpy2,清华numpy安装,pipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simple--upgradenumpy   ......
  • 异常检测 | 迁移学习《Anomaly Detection in IR Images of PV Modules using Supervis
    论文信息论文标题:AnomalyDetectioninIRImagesofPVModulesusingSupervisedContrastiveLearning论文作者:AbhayRawat, IshaDua, SauravGupta, RahulTallamraju 论文来源:LukasBommes,MathisHoffmann,ClaudiaBuerhop-Lutz,TobiasPickel,JensHauch,Christ......
  • Pycharm中安装了pandas模块,但在引入该模块时提示No module named 'pandas'
    之前遇到一个问题,先放上问题截图  pandas模块是安装在site-packages目录下的一个文件,但是引用时可以看到有红色的波浪线提示没有该模块,我们可以这样试试将projectstructure添加site-packages目录,步骤:(1)选择File—>settings—>project:pythonWork—>projectstructure  ......
  • Git 工具 - 子模块: submodule与subtree的使用
    git日常使用中,基本都是一个项目一个Git仓库的形式,那么当我们的代码中碰到了业务级别的需要复用的代码,我们一般怎么做呢?比如:某个工作中的项目需要包含并使用另一个项目。也许是第三方库,或者你独立开发的,用于多个父项目的库。所以需要提取一个公共的类库提供给多个项目使用,但是......
  • cnpm安装appium出现cannot find module xxx
    背景,我的电脑MacBookproM1芯片,brew安装了npm,再通过npm安装了cnpm,但是通过cnpm安装appium时候总会出现cannotfindmodulexxx,然后又对xxx再cnpm安装,再安装appium又出现新的xxx,网上找了很多方法,都没有对症下药的办法,最后像一个法子,直接干脆通过npm指定阿里镜......
  • 如何在 SAP BTP 上创建 Module 之间具有依赖关系的 SAP MTA 应用
    @目录相关阅读写作背景实现思路步骤1:编写JavaRESTfulAPI步骤2:在SAPUI5中消费JavaRESTfulAPI步骤3:运行MTA应用程序步骤4:部署和运行MTA应用程序相关阅读SAPBTP平台CloudFoundry环境下编程概述如何在SAPBusinessApplicationStudio里创建SAPUI5应用并......
  • 修改git的submodule链接
    修改git的submodule链接简介从github导入库到gitee,有些库会以submodule形式依赖第3方库,这时我们从gitee下载时也要对应修改。修改.gitsubmodule文件将库的路径改成gitee库的名称即可gitsubmodule命令gitsubmodule[--quiet][--cached]gitsubmodule[--quiet]add[<opt......