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

注意：如果初始化项目时选择了vuex，一定要删除根目录下原有store.js文件

2》引入 vuex

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(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。

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容