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