「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」前端

📢歡迎點贊：👍 收藏 ⭐留言 📝 若有錯誤敬請指正，賜人玫瑰，手留餘香！

📢本文做者：由webmote 原創，首發於 C🙉

📢做者格言：生活在於折騰，當你不折騰生活時，生活就開始折騰你，讓咱們一塊兒加油！💪💪💪

🎏 1. 大道起源

俗話說：一輩子2、二生3、三生萬物。vue

在一個混沌初開的世界，總須要預留一個初始過程，就如女媧娘娘須要🔥冶煉石頭同樣🎎。搭建一個前端項目，咱們也須要初始化一些類庫，組織組織腳手架，配置配置webpack等等。webpack

固然，在這裏，咱們關心的是後臺的某些數據，須要初始化🍀🍀🍀🍀。web

有哪些花花草草🌼，須要初始化施肥呢？vuex

🍄 系統全局配置，全局配置通常來自於後臺數據庫 🍄 系統詞典列表，通常也來自後臺數據庫 🍄 某些國際化詞典資源，大部分國際化直接來自前臺，但總有某些例外的傢伙~~數據庫

🎏 2. 初始化的優勢

從第1小節，咱們能夠看到，須要初始化的資源，在每一個模塊被使用的概率，仍是很高的。後端

若是沒有初始化的幫忙，每次模塊的created ，都須要調用後臺api，獲取數據。api

所以從這能看出來，其優勢🌷以下：數組

入口統一
數據保持
全局使用
減小api調用次數
減輕後臺壓力
下降使用複雜度

🎏 3. 初始化的缺點

話⚡說，天下大勢，分久必合，合久必分，歷史的事情都是在循環往復中曲折前進。緩存

既然沒有必然的事情，那咱們就來看看引入了初始化，會帶來哪些麻煩🥀？

數據須要持久化，初始化後的數據須要存儲在vue屬性、vuex、cookie、localStorage等任一前端存儲內
數據不一致性，持久化數據後，必然會帶來數據的不一致；例如，✍用戶修改了詞典

針對這些缺點，咱們須要爲引入的初始化作額外多餘的工做🏃🏃🏃。

持久化是前端的老本行了，可選擇餘地很大；
不一致性可使用2個思路進行。 👉無論它，用戶修改了本身刷新總體頁面從新初始化後生效； 👉找到時機，哪裏修改，哪裏負責從新激發數據的初始化；

🎏 4. 三分鐘體驗區

下面是三分鐘體驗區，歡迎進入！ 👬👬👬手拉手，往前走，一步一步太小坑~~

🚧 場景：某後臺管理程序，有1個詞典和1個配置接口很符合咱們的初始化場景，請求改造。 ⛱ 改造三分鐘，請看下面步驟。

🏒4.1 定義存儲Vuex

由於是後臺管理程序，其大機率須要存儲其餘數據，所以，咱們選擇了稍微重量級的VueX做爲存儲的方案。

咱們採用Vuex做爲初始化數據的持久化存儲區，並利用Cookie緩存數據，以便獲取不到後臺Api是，暫時用來撐場子。

import Cookies from 'js-cookie'
# 定義 dict 和 appConfig 做爲 存儲路徑
const state = { 
  dict: Cookies.get('dict') || [],
  appConfig: Cookies.get('config') || {},
}
複製代碼

增長mutations 和 actions，如下是常規操做。

const mutations = {  
  SET_DICT: (state, dict) => {
    if (dict) {
      state.dict = dict
      Cookies.set('dict', dict)
    }
  },
  SET_APP_CONFIG: (state, appConfig) => {
    if (appConfig) {
      state.appConfig = appConfig
      Cookies.set('config', appConfig)
    }
  },
}

const actions = {  
  setDict({ commit }, dict) {
    commit('SET_DICT', dict)
  },
  setAppConfig({ commit }, config) {
    commit('SET_APP_CONFIG', config)
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}
複製代碼

🏒4.2 定義Api調用類

集中力量辦大事，是我國的特點！作人處事，當學我黨的優秀做風！ 🌌🌌🌌 咱們的目標是，星辰大海~~

/** * @file 基礎數據讀取：【掛在vue上，其餘組件直接使用】 * @author webmote * @date 2021.06 */
import store from '@/store'

const GetDictCategory = function(vm) {
  vm.$http.fetch({
    url: '/tools/GetDictCategory',
    method: 'get',
  }).then(data => {
     // 使用store存儲數據
    store.dispatch('app/setDict', data)
  })
}

const GetConfig = function(vm) {
  vm.$http.fetch({
    url: '/cfg/GetCfgList',
    method: 'get',
  }).then(data => {
    //這裏，須要你根據本身的後臺api進行適當調整了~~~
    const dict = {}
    if (data) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        dict[item.cfgName] = item.cfgValue
      }
    }
    console.log(dict)
    store.dispatch('app/setAppConfig', dict)
  })
}

const getData = function(vm) {
  GetDictCategory(vm)
  GetConfig(vm)
}

export default {
  getData,
}

複製代碼

🏒4.3 初始化時機

那咱們應該在啥時候初始化呢？ 🤔🤔🤔思考1分鐘，再往下看。

你一猶豫、一擔心,機會稍縱即逝,就是Loser;當機立斷者,就成李奇威、巴頓、馬雲。

機遇稍縱即逝，可遇而不可求。因此當機遇到來時，要果斷地抓住機遇；若是猶豫不決，當機會失去時便懊悔莫及。

春天在哪裏呀春天在哪裏？🌺🌺🌺🌺🌺🌺

春天在那青翠的山林裏！ 🌳🌳🌳🌲🌲🌲

這裏有紅花呀這裏有綠草，🌷🌷🌷🍀🍀🍀

還有那會唱歌的小黃鸝。 🐦🐦🐦🐥🐥🐥

打開App.Vue 。對，你沒看錯！就是它，咱們在它 created 時構建請求。

<script>
export default {
  name: 'App',
  created() {
    console.log('the App is startup........')
    this.$baseData.getData(this)
  },
}
</script>
複製代碼

哎，大哥 $baseData 又是啥東東？玩我呢？

奧，奧，忘了說了。

🏒4.4 全局定義

這個定義在main.js內，定義在main裏.😍😍😍

主要考慮是爲了解決缺點二，若是你須要在其餘地方調用，能夠方便的引用之。

import BaseData from '@/utils/baseData'
Vue.baseData = Vue.prototype.$baseData = BaseData
複製代碼

🏒4.4 使用

詞典和配置都在VueX內定義，所以使用的時候，就不要考慮後臺Api的事情了。僅僅須要：

dict: this.$store.state.app.dict,
cfg: this.$store.state.app.appConfig,
複製代碼

詞典是數組套數組，所以若是須要訪問指定類型的詞典，能夠寫個簡單函數

getDict(category) {
  if (!this.dict) return []
   const item = this.dict.find(item => item.category == category)
   if (!item) return []
   return item.dictValues
 },
複製代碼

🎏 5. 小結

時機的確是我最糾結的，這個時機的選擇來自一位多年前的前端大牛，向他致敬！

年少不識前端香，🕺🕺🕺 錯把後端當個寶！

例行小結，理性看待！

結的是啥啊，結的是我想你而不可得的寂寞。😳😳😳

👓都看到這了，還在意點個贊嗎？

👓都點讚了，還在意一個收藏嗎？

👓都收藏了，還在意一個評論嗎？

還有系列前端文章，客官，你不瞧瞧？

👉Vue中路由到一個公共組件，而後根據路徑中是否存在文件動態加載組件 👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之一緣起 👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之二接口 👉解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之三表格

前端項目，看我在這裏管理全局後臺初始化的數據，就問你颯不颯？