【Vue】核心概念 - module

目标

掌握核心概念 module 模块的创建

问题

由于使用单一状态树 ,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

这句话的意思是,如果把所有的状态都放在state中,当项目变得越来越大的时候,Vuex会变得越来越难以维护

由此,又有了Vuex的模块化


模块定义 - 准备 state

新建store/modules文件夹

定义两个模块 usersetting

user中管理用户的信息状态 userInfo modules/user.js

jsx 复制代码
const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

setting中管理项目应用的 主题色 theme,描述 desc, modules/setting.js

jsx 复制代码
const state = {
  theme: 'dark', // 主题色
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

store/index.js文件中的modules配置项中,注册这两个模块

js 复制代码
import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        // user: user 同名可简写
        user,
        setting
    }
})

检验是否配置成功:通过vue的调试工具

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc

也可以通过 mapState 映射

相关推荐
慕斯策划一场流浪1 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI23 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
cypking29 分钟前
解决 axios get请求瞎转义问题
vue.js
向阳25638 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd41 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI42 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见43 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特44 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪1 小时前
学习笔记:三行命令,免费申请https加密证书📃
前端