Vue + ElementUI 实现后台管理系统模板 -- 前端篇（七）：引入 vuex 进行状态管理

export default new Vuex.Store({

state: {

},

mutations: {

},

actions: {

},

modules: {

}

})

3》根据功能拆分成各个模块

所有的状态管理写在一个 js 里，不方便维护。

可以根据不同的功能，抽取去不同的模块 js 进行处理。

比如：登录模块可以定义 user.js 去处理、公共模块可以定义 common.js 去处理。

如下：定义一个 user.js，其中 state 管理一个 userName 数据，当登录成功时，保存该数据，并显示在主页面的右上角。

export default {

// 开启命名空间（防止各模块间命名冲突），访问时需要使用 模块名 + 方法名

namespaced: true,

// 管理数据（状态）

state: {

// 用于保存用户名

userName: ‘Admin’

},

// 更改 state（同步）

mutations: {

updateName(state, data) {

if (data) {

state.userName = data

} else {

state.userName = ‘Admin’

}

}

},

// 异步触发 mutations

actions: {

updateName({

commit,

state

}, data) {

commit(“updateName”, data)

}

}

}

getter文件

const getters = {

userName: state => state.userName,

}

export default getters

4》将定义好的模块，在 index.js 中引入。

import Vue from ‘vue’

import Vuex from ‘vuex’

import user from ‘./module/user.js’

import getters from ‘./getters’

Vue.use(Vuex)

export default new Vuex.Store({

modules: {

user

},

getters

})

5》使用

在组件中，可以引用 state、action 。

其中：

使用 $store.state 可以引用 state 中的数据，也可使用 mapState 替代 $store.state。

使用 $store.dispatch可以引用action中的方法，也可使用mapActions替代$store.dispatch。

如下：

在 Header.vue 页面中，使用 mapState 引入 userName，并显示。

在 computed 中 引入 state 定义的属性（可以使用 数组 或者 对象的形式）。

由于使用了 模块进行封装，所以在引入时，第一个参数需要指定 模块名。

import {mapState} from ‘vuex’

export default {

computed: {

// …mapState(‘user’, {userName: ‘userName’}),

…mapState(‘user’, [‘userName’])

}

}

6》在 Login.vue 中引入 action 方法，用于修改 用户名。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！