13. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-状态管理设置Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我这里主要使用它来存储一些全局变量以及用户的状态。

一、创建mutation-types.js文件，对mutations统一管理

这样做的目的主要是：
1）为了减少编码，比如多个地方存在“save_user_info”时，用常量来引用，可维护性更高，减少手抖多一个字母少一个字母的错误。
2）大项目多人开发时，对mutations统一管理，找函数很直观。
3）可以根据模块来分类来给mutation type命名，名字多长都可以，常量名简短就好了

我这里mutation-types.js的代码如下:

export const SAVE_USERINFO = 'SAVE_USERINFO'

二、创建一个 store.js，来进行状态管理

代码为：

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-types.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 用户信息
    userInfo: !localStorage.getItem('userInfo') ? {} : JSON.parse(localStorage.getItem('userInfo')),
    // 菜单列表
    menuList: [
      { name: '用户管理', url: '/home/user', icon: 'el-icon-user' },
      { name: '周报列表', url: '/home/weekly', icon: 'el-icon-s-grid' }
    ],
    pageSize: 10 // 每页请求多少条
  },
  mutations: {
    [types.SAVE_USERINFO] (state, data) {
      state.userInfo = data
    }
  },
  actions: {
    saveUserInfo ({ commit }, data) {
      commit(types.SAVE_USERINFO, data)
    }
  }
})

三、项目链接

周报管理系统git仓库链接：nodeJs工作周报后台管理系统OA模板

程序员接单_竹立荷塘的博客-CSDN博客