zoukankan      html  css  js  c++  java
  • Vue-admin工作整理(十一):Vuex-动态注册模块

    概述:

      动态注册模块分为两种,一种是在根state下注册一个模块,一种是在模块下再自动注册一个模块

    第一种:根state下动态注册模块:

      思路:通过store来实现,this.$store来获取当前的实例内容,然后通过当前根实例的registerModule方法来实现模块动态注册:

    registerModule () {
          this.$store.registerModule('todo', { // 第一个参数为我们需要添加的模块名称,第二个是一个对象,写
            state: { // 这块和在user.js里的注册模块方法是一样的,这里在state里注册了一个todoList
              todoList: [
                'mutations',
                'actions'
              ]
            }
          })
        }

    使用的时候通过computed来初始,这里需要增加一个state实例下的指定模块是否存在的判断,有则继续执行,无则返回为空

    备注:computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

    todoList: state => state.todo ? state.todo.todoList : []

    第二种:给模块下动态添加子模块:

      思路:与根模块下添加有唯一一个区别就是在调用registerModule方法的时候,以数组方式定义模块结构:['user', 'todo'],前者为模块名,后者为动态增加的子模块名

    // 给模块动态添加一个子模块:
        registerchildModule () {
          this.$store.registerModule(['user', 'todo'], { // 第一个参数为我们需要添加的模块名称,给uer模块添加了一个子模块,
          // 使用的是数组的形式,第二个是一个对象,写
            state: { // 这块和在user.js里的注册模块方法是一样的,这里在state里注册了一个todoList
              todoList: [
                'childmutations',
                'childactions'
              ]
            }
          })
        }

    其他取值和读取跟第一种完全一样

  • 相关阅读:
    thinkphp中的验证码的实现
    js深入研究之牛逼的类封装设计
    js深入研究之函数内的函数
    js深入研究之初始化验证
    js深入研究之Person类案例
    js深入研究之匿名函数
    js深入研究之类定义与使用
    sublime text3 自动编译php 适合用于简单的php文件执行
    PHP实现四种基本排序算法 得多消化消化
    thinkphp中的类库与引用import引入机制
  • 原文地址:https://www.cnblogs.com/cristin/p/9638905.html
Copyright © 2011-2022 走看看