vuex 动态注册方法 registerModule的实现

2024-07-28 22:50:55

Vuex（2.3.0+）可以用store.registerModule方法在进入路由时进行注册，离开路由时候销毁 actions, mutations, getters, state，在一定范围内相同名称不会被覆写

例子

index.js

传this 的写法

module.exports = {
  install(_this) {
    _this.$store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall(_this) {
    _this.$store.unregisterModule(['abc'])
  }
};

不传this，有写 store 的写法

import store from '../../store';

export default {
  install() {
    store.registerModule(['abc'], {
      namespaced: true,
      state: {
        rightTest: 999
      },
      actions: {
        setTest: ({commit}, val) => {
          commit('putTest', val)
        }
      },
      mutations: {
        putTest: (state, val) => {
          state.rightTest = val;
        }
      }
    })
  },
  uninstall() {
    store.unregisterModule(['abc'])
  }
}

调用方法时应该在创建完实例之后的钩子中，未创建实例调用会找不到 store。

在install、uninstall时，传递this过去，可以在上面中直接调用。

dispath 时，如果设置了命名空间，则一定要加上，我这个因为没使用较复杂的命名，注册时的名字就在命名空间那用了。

test.vue

import abc from '../../store/test';
...
created() {
  // 挂载对应的 store
  abc.install(this);
  console.log(this.$store, 'install');
},
destroyed() {
  // 销毁对应的 store
  abc.uninstall(this);
  console.info(this.$store, 'uninstall');
},
methods: {
 test(){
  this.$store.dispatch('abc/setTest', Math.random());
 }

总结

当范围内使用动态方法注册 actions 时还是比较爽的，而且在destroyed 钩子中销毁可以节省一部分资源；

配置命名空间也可以避免覆盖问题，算是多一种手段吧（感觉还是应用在多模块，全局注册时用到这个）；

当没有父子关系时，但还需要多页面共享状态，可以用动态注册就不太方便了；
（我好像还是没解决全局注册时方法过多的问题。。。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue+vuex+axios实现登录、注册页权限拦截

在GitHub上有很多写好的模板,这个项目也是基于模板做的. 现在记录一下我做的过程 1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2.接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径 login.vue <template> <div
vuex 动态注册方法 registerModule的实现

Vuex(2.3.0+)可以用store.registerModule方法在进入路由时进行注册,离开路由时候销毁 actions, mutations, getters, state,在一定范围内相同名称不会被覆写例子 index.js 传this 的写法 module.exports = { install(_this) { _this.$store.registerModule(['abc'], { namespaced: true, state: { rightTest: 999 },
Oracle静态注册与动态注册详解

一.概述: Oracle的注册就是将数据库作为一个服务注册到监听程序.客户端不需要知道数据库名和实例名,只需要知道该数据库对外提供的服务名就可以申请连接到这个数据库.这个服务名可能与实例名一样,也有可能不一样. 在数据库服务器启动过程中,数据库服务器会向监听程序注册相应的服务(无论何时启动一个数据库,默认地都有两条信息注册到监听器中:数据库服务器对应的实例和服务.) 相当于是这样:在数据库服务器和客户端之间有一监听程序(Listener),在监听程序中,会记录相应数据库对应的服务名(一个数据库可
Oracle Listener 动态注册与静态注册

一．什么是注册注册就是将数据库作为一个服务注册到监听程序.客户端不需要知道数据库名和实例名,只需要知道该数据库对外提供的服务名就可以申请连接到数据库.这个服务名可能与实例名一样,也有可能不一样. 在数据库服务器启动过程中,数据库服务器会向监听程序注册相应的服务(无论何时启动一个数据库,默认地都有两条信息注册到监听器中:数据库服务器对应的实例和服务.) 相当于是这样:在数据库服务器和客户端之间有一监听程序(Listener),在监听程序中,会记录相应数据库对应的服务名(一个数据库可能对应有多个服
Spring动态注册多数据源的实现方法

最近在做SaaS应用,数据库采用了单实例多schema的架构(详见参考资料1),每个租户有一个独立的schema,同时整个数据源有一个共享的schema,因此需要解决动态增删.切换数据源的问题. 在网上搜了很多文章后,很多都是讲主从数据源配置,或都是在应用启动前已经确定好数据源配置的,甚少讲在不停机的情况如何动态加载数据源,所以写下这篇文章,以供参考. 使用到的技术 Java8 Spring + SpringMVC + MyBatis Druid连接池 Lombok (以上技术并不影响思路实现,
Spring运行时动态注册bean的方法

在spring运行时,动态的添加bean,dapeng框架在解析xml的字段时,使用到了动态注册,注册了一个实现了FactoryBean类! 定义一个没有被Spring管理的Controller public class UserController implements InitializingBean{ private UserService userService; public UserService getUserService() { return userService; } pu
一个事半功倍的c#方法动态注册按钮事件

言归正传,下面就来讲讲怎样动态注册按钮事件. 首先,我们需要设置变量来获取点击一个数字按钮的值,以便在"="按钮单击事件中计算最终的结果.下面就是我开始的时候写的一段代码: 复制代码代码如下: public double? value1 = null ;//获取运算符前的数值 public double? value2 = null ;//获取运算符前的数值 public type caltype=type .none ;//获取运算符 private void btnvalue1_
Spring之动态注册bean的实现方法

Spring之动态注册bean 什么场景下,需要主动向Spring容器注册bean呢? 如我之前做个的一个支持扫表的基础平台,使用者只需要添加基础配置 + Groovy任务,就可以丢到这个平台上面来运行了,而这个基础平台是一直都在运行的,所以在新来任务时,最直观需要注册的就是 DataSource 数据源这个bean了,那么可以怎么玩? I. 主动注册Bean支持借助BeanDefinition来实现bean的定义,从最终的使用来看,代码比较少,几行而已 public <T> T regis
Mvc动态注册HttpModule详解

序言注册Httpmodule可以让我们使用HttpApplication对象中的处理管道事件.目前大家所熟知的应该有2种方式来使用HttpApplication对象中的处理管道事件.第一种是通过Global.asax全局文件,另外一种是通过配置文件来注册httpmodule.那么有这2种方式啦,为什么还要有今天这篇博客呢? 这里我也提1个简单的问题,用实例来证明下动态注册httpmodule的可取之处. 如果你要写一个.net框架,供公司所有mvc项目使用,那么你的框架集成的众多功能中,至少应
vue使用require.context实现动态注册路由

需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册. 借鉴思路: 参考vue的功能基础组件的自动化全局注册,看到一个require.context方法,可以读取某个文件夹下的文件信息.因此考虑,使用这个方法,获取views文件夹下的.vue页面,文件夹名称作为路由名称 require.context的使用介绍: 一个webpa
Android 动态注册监听网络变化实例详解

Android 动态注册监听网络变化实例详解新建一个BroadcastTest项目,然后修改MainActivity中的代码,如下: public class MainActivity extends AppCompatActivity { private IntentFilter intentFilter; private NetworkChangeReceiver networkChangeReceiver; @Override protected void onCreate(Bundle

vuex 动态注册方法 registerModule的实现

相关推荐

随机推荐