上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享

使用场景:

数据最终存放在store的State中, 但是也会面临问题, 比如,login.vue和dept.vue这俩组件都需要使用store在不同的组件之间进行数据的共享, 很明显,将login.vue中得到的用户信息和后续得到的dept信息都放在一个Store.State中时,就会显得很臃肿,这时可以考虑将store模块化了

模块化后的 store 大概长这样,如果画的不对,欢迎留言

这样经过模块化的vuex,每个模块维护着不同组件的数据,清晰直观

编码实现

创建store文件夹, 创建index.js 作为vuex的入口js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import dept from "./modules/dept"; Vue.use(Vuex) const store = new Vuex.Store({
modules: {
app,
user,
dept
},
getters
}) export default store

如上图中,将vuex划分成三个模块,每一个模块都拥有自己的action, mutation, state组件

创建vuex的子模块, user.js , 编码如下: 注意点就是要开启命令空间模式, namespaced=true , 因为现在的store被划分成了多模块,每一个模块都有自己的state,所有在mapXXX使用时,需要指定使用的是哪个模块下的state

const user = {
namespaced: true,
state: {
// 用户的属性
}, mutations: {
// todo
AddInfo(state,data){
// todo with state
}
},
actions: {
addInfo({commit},data){
commit('AddInfo',data)
}
// todo
}
}
export default user

多模块vuex的使用:

如图,如果不划分模块,我们有两种方法,可以这样,$store.state.属性 或者 $store.getters取出state中的值使用,划分模块后,推荐使用通过名称空间映射的方式映射出不同模块的State再使用

所以需要再创建getters.js

const getters = {
userId: state => state.user.userId
}
export default getters
  • 取值
import store from './store'

let userId = store.getters.userId
  • 映射action

    指定 模块,映射出方法

import {mapActions} from "vuex";
...mapActions('user', [
'addInfo',
]),

Vuex模块化的更多相关文章

  1. Vuex 模块化与项目实例 (2.0)

    Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就 ...

  2. Vuex 模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...

  3. vuex : 模块化改造

    我们知道,vuex是vue技术栈中很重要的一部分,是一个很好用的状态管理库. 如果你的项目没有那么复杂,或者对vuex的使用没有那么重度,那么,是用不着modules功能的. 但如果你写着写着就发现你 ...

  4. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  5. vuex模块化。

    项目结构: 1:在src下新建目录store,然后再建storemodule.js文件,把 上篇 store.js文件抽出来: import Vue from 'vue' import Vuex fr ...

  6. 深入理解Vuex 模块化(module)

    todo https://www.jb51.net/article/124618.htm

  7. vuex数据管理-数据模块化

    对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...

  8. 基于vue2.0+vuex+localStorage开发的本地记事本

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...

  9. vuex 的基本使用之Module

    Module 首先介绍下基本的组件化规则:你可以根据项目组件的划分来拆分 store,每个模块里管理着当前组件的状态以及行为,最后将这些模块在根 store 进行组合. const moduleA = ...

随机推荐

  1. 解决 mysql多表联合查询时出现的分页问题

    mysql一对多分页问题 部门表:tbl_dept 员工表:tbl_emp 数据库sql文件 CREATE DATABASE /*!32312 IF NOT EXISTS*/`ssm-crud` /* ...

  2. Y服务-你真的懂 Yaml 吗

    目录 一.什么是 Yaml 二.Yaml 的语法 三.操作 Yaml A. 引入框架 B. 代码片段 C. 完整案例 参考文档 在Java 的世界里,配置的事情都交给了 Properties,要追溯起 ...

  3. C#2.0新增功能05 迭代器

    连载目录    [已更新最新开发文章,点击查看详细] 迭代器可用于逐步迭代集合,例如列表和数组. 迭代器方法或 get 访问器可对集合执行自定义迭代. 迭代器方法使用 yield return 语句返 ...

  4. Socket 连接问题之大量 TIME_WAIT

    简评:最近项目就出现了大量短连接导致建立新连接超时问题,最后是通过维护长连接解决的. 代理或者服务器设备都有端口限制,如果使用 TCP 连接,连接数量达到端口限制,在这种情况下,将不能创建新的连接. ...

  5. java中的堆、栈、方法区等比较

    • 堆.栈.方法区 1. java中的栈(stack)和堆(heap)是java在内存(ram)中存放数据的地方 2. 堆区 存储的全部是对象,每个对象都包含一个与之对应的class的信息.(clas ...

  6. 跟着大彬读源码 - Redis 6 - 对象和数据类型(下)

    继续撸我们的对象和数据类型. 上节我们一起认识了字符串和列表,接下来还有哈希.集合和有序集合. 1 哈希对象 哈希对象的可选编码分别是:ziplist 和 hashtable. 1.1 ziplist ...

  7. Java EE.JavaBean

    JavaBean是一组可移植.可重用.并可以组装到应用程序中的Java类.一个Model类(属性+构造函数).

  8. Java--UTF-8

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码.由Ken Thompson于1992年创建.现在已经标准化为 ...

  9. iis8 php-cgi.exe - FastCGI 进程意外退出 500错误解决办法

    今天iis服务环境下的网站突然显示200错误php-cgi.exe - FastCGI 进程意外退出,昨天还好好的网站正常,这个问题一直偶尔出现几次,不是很频繁,但是偶尔会出现: 这是由于某些加载库加 ...

  10. Djangou中使用cookie和session

    一.会话跟踪 我们先需要了解是什么是会话!可以把会话理解为客户端与服务器之间的一次会话,在一次会话中可能会包含多次请求和响应,例如你给10086打个电话,你就是客户端,而10086服务人员就是服务器, ...