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)
    }
  }
})

三、項目體驗鏈接

週報管理系統體驗鏈接： https://www.17sucai.com/pins/35488.html

本人前端程序員，長期混跡於各種前端開發中，現在專門爲前端熱愛者建了個微信羣，和大家一起分享自己在工作、學習中遇到的技術知識或問題，還有各種資料和課程，各位感興趣的可以加入哦~