精华内容
下载资源
问答
  • vue学习笔记之vuex动态注册模块

    千次阅读 2019-02-19 17:17:03
    vuex动态注册模块 vuex动态注册模块是利用store的registerModule方法实现的,下面具体看一下相关代码: 注册模块 export default { methods: { register() { this.$store.registerModule('模块名称',{ ...

    vuex动态注册模块

    vuex动态注册模块是利用store的registerModule方法实现的,下面具体看一下相关代码:

    注册模块

    export default {
    	methods: {
    		register() {
    			this.$store.registerModule('模块名称'{
    				state: {},
    				getters: {},
    				mutations: {},
    				actions: {}
    			})
    		}
    	}
    }
    

    已有模块动态注册子模块

    export default {
    	methods: {
    		register() {
    			this.$store.registerModule(['已有模块名称','子模块名称']{
    				state: {},
    				getters: {},
    				mutations: {},
    				actions: {}
    			})
    		}
    	}
    }
    

    vuex模块小知识

    在非根模块的模块内,调用action访问或修改根模块的state参数可以通过 rootState,rootGetters参数访问。具体代码如下
    actions.js

    const actions = {
    	ACTIONS({commit,dispatch,getters,state,rootState,rootGetters}) {
    		//
    	}
    };
    export default actions;
    

    完整的actions参数如上面代码所示,其中 rootState、rootGetters是根模块的state和getters,其他则是本模块内的参数。

    展开全文
  • vuex 动态注册模块 Vue注册商 (Vue Registrar) A Vue.js package that makes your code a lot cleaner and much more understandable. 一个Vue.js软件包,使您的代码更简洁,更易懂。 View demo 查看演示 View ...

    vuex 动态注册模块

    Vue注册商 (Vue Registrar)

    A Vue.js package that makes your code a lot cleaner and much more understandable.

    一个Vue.js软件包,使您的代码更简洁,更易懂。

    从技术上讲这是什么? (What is this technically?)

    Vue Registrar is consisted of two features that:

    Vue注册器由两个功能组成:

    • Registers all your common and frequently used components globally and ends the need for importing them manually;

      在全球范围内注册所有常用和经常使用的组件,从而无需手动导入它们;

    • Assembles all your vuex modules in a nested manner.

      以嵌套方式组装所有vuex模块。

    我为什么要使用它? (Why should I use it?)

    No more words! see yourself:

    没有更多词语! 看到自己:

    使用组件注册器 (Using Component Registrar)

    component-registrar-usage

    If you're familiar with following structure:

    如果您熟悉以下结构:

    // hello-world.vue
    <template> ... </template>
    <script>
    import SomethingCommon from './path/to/it'
    export default {
      components: { SomethingCommon }
    }
    </script>

    You may need this feature! By using that, you just need to consider your template:

    您可能需要此功能! 通过使用它,您只需要考虑您的模板:

    // hello-world.vue
    <template> ... </template>

    使用Vuex模块汇编器 (Using Vuex Module Assembler)

    vuex-module-assembler-usage

    If you're using Vuex modules (especially in a nested or namespaced manner) like this:

    如果您正在使用Vuex模块(尤其是以嵌套或命名空间的方式),如下所示:

    // store.js
    import moduleAlphaState from './path/to/moduleAlpha/state'
    import moduleAlphaActions from './path/to/moduleAlpha/actions'
    import moduleBeta from './path/to/moduleBeta'
    
    export default {
      a: {
        state: moduleAlphaState,
        actions: moduleAlphaActions,
        namespaced: true,
        modules: {
          nestedB: moduleBeta
        }
      }
    }
    </script>

    You'll need this feature. By using it, you don't need to do anything else! just follow a simple directory structure:

    您将需要此功能。 通过使用它,您无需执行任何其他操作! 只需遵循一个简单的目录结构:

    vuex-modules/
    └── a
        ├── actions.js
        ├── state.js
        └── b
            ├── actions.js
            ├── getters.js
            ├── mutations.js
            └── state.js

    翻译自: https://vuejsexamples.com/a-dynamic-component-registrar-and-vuex-module-assembler/

    vuex 动态注册模块

    展开全文
  • Vuex注册模块的方式

    千次阅读 2018-11-28 00:06:49
    在实际的项目应用中,如果把该项目中应用到的所有的state...下面就如何利用vuex中的模块概念,解决全局Store过于复杂问题,给出两种方式,静态注册动态注册。首先我们创建的模块的名称为moduleA,如下 moduleA.js...

    在实际的项目应用中,如果把该项目中应用到的所有的state和mutation、Action等放置在全局的store中,会出现全局store内容过于庞大,并且变量名,方法名都很受限制,而vuex中的模块概念就恰好可以解决此问题

    下面就如何利用vuex中的模块概念,解决全局Store过于复杂问题,给出两种方式,静态注册和动态注册。首先我们创建的模块的名称为moduleA,如下

    moduleA.js

    export default {
        namespaced: moduleA,  // 增加命名空间
        state() {
            return {
                showModal: false,
                num: 1
            }
        },
        getters: {
            ...
        },
        mutations: {
            changeShowModal() {
                ....
            }
            ...
        }
    }
    

    创建静态store模块

    静态创建就是在实例化vuex的时候,定义好所需要的模块

    ...
    import moduleA from 'moduleA'
    ...
    
    export default new vueX.Store({
    	...
        modules: {
    		moduleA 
        }
    })
    

    如何在vue文件中使用该模块的变量和方法?

    // 对于state
    cumputed: {
        // 引用的全局store
    	...mapState(['isShowSomething']),
            // 引用模块
        ...mapState('moduleA', [
            'showModal',
            'num'
        ]),
        ...
    },
    methods: {
        ...mapMutations('moduleA', [
            'changeShowModal'
        ])
    }
    
    

    创建动态store模块

    动态创建,就是在需要的地方,再去注册该模块。在页面中,使用如下方式进行手动注册

    <script>
        import moduleA from '../store/modules/moduleA'
        created() {
            this.$store.registerModule('moduleA', moduleA);
        }
    </script>
    

    具体使用变量和方法的方式和静态创建是一致的

    上面所说的两种方式都是可以应用到自己的项目中的,其中动态注册对该模块的独立性要求更高,可以根据自己的业务需要选择合适的方式

    展开全文
  • 概述:  动态注册模块分为两种,一... 思路:通过store来实现,this.$store来获取当前的实例内容,然后通过当前根实例的registerModule方法来实现模块动态注册: registerModule () { this.$store.registerM...

    概述:

      动态注册模块分为两种,一种是在根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'
              ]
            }
          })
        }

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

    转载于:https://www.cnblogs.com/cristin/p/9638905.html

    展开全文
  • vuex批量注册模块

    2021-07-29 10:51:23
    原文:https://blog.csdn.net/qq_39453402/article/details/109305141 //user.js中 export default{ namespaced:true, state:{ ...import Vuex from 'vuex' Vue.use(Vuex) const modulesFiles=.
  • Vuex &Vuex模块

    2021-09-04 09:19:40
    Vuex模块化 为什么要使用vuex? 如今前后端分离,前端已然成为一个独立的开发单位,一个页面会被分为多个模块来开发 模块模块之间如何关联? 1.父传子 2.子传父 3.兄弟之间传递 那么非关系型组件...
  • 动态注册vuex模块的rootState不响应

    千次阅读 2019-02-19 15:58:47
    我为每个项目动态注册一个vuex模块,如下所示: store.registerModule(['itemGet', id], { namespaced: true, state () { return {id} }, getters: { exampleGetter (state, getters, rootSta...
  • 一、各个模块的作用: state 用来数据共享数据存储 mutation 用来注册改变数据状态(同步) getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据(异步) 二、 创建文件: actions.js ...
  • Vuex的各个模块封装

    万次阅读 2019-12-18 11:38:50
    一、各个模块的作用: state 用来数据共享数据存储 mutation 用来注册改变数据状态(同步) getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据(异步) 二、 创建文件: actions.js ...
  • Vuex 入门上一篇:Vuex 提升自制vuex LOGO前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 ...
  • Vuex中的模块化-Module

    2021-08-29 10:11:15
    Vuex中的模块化-Module 为什么会有模块化? 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 这句话的意思是,如果把所有的状态都放在...
  • vuex的Modules模块

    2021-01-10 21:30:10
    正常情况下action getters是注册在全局命名空间的,这样多个模块能够对同一action或者mutation作出响应。说明刚才的user模块,它的action,mutation和getter其实没有区分,都可以通过全局调用。 如通
  • vuex 的module 模块

    2021-05-06 13:45:21
    为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割: const moduleA = { state: () => ({...
  • registerModule: 动态注册vuex模块 ...在 store 创建之后,你可以使用 store.registerModule 方法注册模块:registerModule</div> 动态注册vuex模块,对于自定义生成组件很有用<!--more-->...
  • ## Vuex中的模块化-Module ### 为什么会有模块化? > 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 这句话的意思是,如果把所有的...
  • 多组件数据共享:Vuex 我们知道每一个组件都有自己的 data,那么多个组件如何共享数据?这就引出了 state 的概念,可以把多个组件共有的属性统一由state进行管理。但是组件并不能直接访问或操作state里的数据源,...
  • vuex中的模块化开发

    2020-12-10 17:34:43
    1.模块化,每个模块拥有自己的state、mutation、action、getter const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () =>...
  • 动态加载Vuex模块

    2020-08-12 14:09:37
    vuex默认加载Vuex is an easy to use and performant solution to handle state management. It makes it a breeze to manage large-scale Vue.js applications and ensures a predictable way to mutate the state ...
  • vuex-store模块化配置

    2019-02-13 12:23:00
    1. 在modules下新建文件夹,文件夹名称按模块功能命名 如: modules ———— home -> homeModule.js | ———— modal -> modalModule.js 2. 在modules 下新建stores.js,注册所有状态 import h...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,669
精华内容 3,067
关键字:

vuex动态注册模块

vue 订阅