[Vuex系列] - Module的用法(终篇)

于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

如何使用module

在store文件夹下新建modules文件夹,并在下面建立moduleA.js和moduleB.js文件用来存放vuex的modules模块

moduleA.js文件内容如下:

const state = {
  stateA: ‘A‘
}

const mutations = {
  showA (state) {
    return state.stateA
  }
}

const actions = {
  showAAction (context) {
    context.commit(‘showA‘)
  }
}

const getters = {
  getA (state) {
    return state.stateA
  }
}

export default {state, mutations, actions, getters}

moduleB.js文件内容如下:

const state = {
  stateB: ‘B‘
}

const mutations = {
  showA (state) {
    return state.stateB
  }
}

const actions = {
  showAAction (context) {
    context.commit(‘showB‘)
  }
}

const getters = {
  getA (state) {
    return state.stateB
  }
}

export default {state, mutations, actions, getters}

store.js 文件内容如下:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import state from ‘./state‘
import mutations from ‘./mutations‘
import getters from ‘./getters‘
import actions from ‘./actions‘
import moduleA from ‘./modules/moduleA‘
import moduleB from ‘./modules/moduleB‘

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  modules: {
    moduleA,
    moduleB
  }

export default store

在组件中使用

<template>
  <div class="modules">
    <h1>{{moduleA}}  ---  {{moduleB}}</h1>
  </div>
</template>

<script>
import { mapState } from ‘vuex‘

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState({
      moduleA:  state => state.moduleA.stateA,
      moduleB:  state => state.moduleB.stateB
    })
  }
}
</script>

模块动态注册

在 store 创建之后,你可以使用 store.registerModule 方法注册模块:

// 注册模块 `myModule`
store.registerModule(‘myModule‘, {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule([‘nested‘, ‘myModule‘], {
  // ...
})

之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如,vuex-router-sync 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起,实现应用的路由状态管理。你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)。

原文地址:https://www.cnblogs.com/wangshucheng/p/vuex-006.html

时间: 2024-10-12 19:01:39

[Vuex系列] - Module的用法(终篇)的相关文章

SQL语句汇总(终篇)—— 表联接与联接查询

既然是最后一篇那就不能只列出些干枯的标准语句,更何况表联接也是SQL中较难的部分,所以此次搭配题目来详细阐述表联接. 上一篇博文说到相关子查询效率低下,那我们怎么能将不同表的信息一起查询出来呢?这就需要用到表联接. 和之前的UNION组合查询不同,UNION是将不同的表组合起来,也就是纵向联接,说白了就是竖着拼起来. 而表联接是通过笛卡尔乘积将表进行横向联接,所谓的通过笛卡尔乘积简单说就是两表的行依次相联再相加.要想更详细的理解可以百度下,毕竟本文主要是汇总SQL语句. 现在有如下两张表: 这是

(十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC:套接字

. . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编程 (APUE) 之 文件和目录 (四) 一起学 Unix 环境高级编程 (APUE) 之 系统数据文件和信息 (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境 (六) 一起学 Unix 环境高级编程 (APUE) 之 进程控制 (七) 一起学 Unix 环境高级编程 (APUE)

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

跟我学SpringCloud | 终篇:文章汇总(持续更新)

SpringCloud系列教程 | 终篇:文章汇总(持续更新) 我为什么这些文章?一是巩固自己的知识,二是希望有更加开放和与人分享的心态,三是接受各位大神的批评指教,有任何问题可以联系我: [email protected]. Github源码下载:https://github.com/meteor1993/SpringCloudLearning <跟我学SpringCloud>系列: Greenwich版 Spring Cloud Greenwich.SR1; Spring Boot 2.1

SpringMVC学习系列(12) 完结篇 之 基于Hibernate+Spring+Spring MVC+Bootstrap的管理系统实现

到这里已经写到第12篇了,前11篇基本上把Spring MVC主要的内容都讲了,现在就直接上一个项目吧,希望能对有需要的朋友有一些帮助. 一.首先看一下项目结构: InfrastructureProjects:是抽取出的基础项目,主要封装了一些通用的操作. SpringMVC3Demo:就是管理系统所在的项目. WeiXinAPI:是之前做微信管理平台测试时封装一些操作,如果不需要把该项目移除即可. 注:项目的前端UI框架用的是国外的一个基于Bootstrap框架的开发的Demo,如不需要替换为

iOS开发系列之一 - UIButton 用法小结

// 初始化按钮并设置类型 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 能够定义的UIButton类型有以下6种: // typedef enum { // UIButtonTypeCustom = 0, 自定义风格 // UIButtonTypeRoundedRect, 圆角矩形 // UIButtonTypeDetailDisclosure, 蓝色小箭头按钮,主要做详细说明用 // UIButto

jquery jtemplates.js模板渲染引擎的详细用法第一篇

jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据时发愁了.后端语言使用php,asp.net,jsp等都不是问题,使用模板渲染可以很大程度上提高程序性能,使用异步获取数据,不用整个页面都回发,好处当然不仅仅是这些. 下载jtemplates,官网的文档写得非常的详细 打开官网:http://jtemplates.tp

毕业季?终篇

“滚滚长江东逝水,浪花淘尽英雄,是非成败转头空,青山依旧在,几度夕阳红!” ——<临江仙> 追随着时光的脚步,迎来了学生时代最后的岁月,我,要毕业了,后天,就要正式的踏入社会,正式入职了.终篇,写在毕业的最后,也是写在入职的伊始. 慷慨激昂,学生二十年,我自横刀,自有所成长.努力过,嬉笑过,抱怨过,愤怒过,但从未放弃过.从三年级开始做数学课代表,直至高三.除此之外,期间纪律委员.生活委员.学习委员.班长等等,也皆有所任.在这个毕业的日子,我可以大声的说一句:“我,毕业了,作为学生,结束了,我,

Spring Security教程系列(一)基础篇-2

第 4 章 自定义登陆页面 Spring Security虽然默认提供了一个登陆页面,但是这个页面实在太简陋了,只有在快速演示时才有可能它做系统的登陆页面,实际开发时无论是从美观还是实用性角度考虑,我们都必须实现自定义的登录页面. 4.1. 实现自定义登陆页面 自己实现一个login.jsp,放在src/main/webapp/目录下. 4.2. 修改配置文件 在xml中的http标签中添加一个form-login标签. <http auto-config="true">