關於vue全域性變數的管理可參看 vuex官方文件

此處只是本人在開發過程中的一些記錄，方便查閱，希望能給各位帶來一些幫助！

全域性變數定義：

在目錄store下建立目錄modules目錄然後建立檔案config.js:

const getDefaultState = () => {
    sys: {}
}

const state = getDefaultState()

const mutations = {
  setSys: (state, sysConfigs) => {
    state.sys = sysConfigs
  }
}

export default
 
 {
  namespaced: true,
  state,
  mutations
}

以上方式變數的賦值為同步進行的，要想進行非同步複製比如通過ajax請求回來的資料設定全域性變數可使用以下方式：

在目錄store下建立檔案actions.js

import sysConfig from '@/api/platform/sys-config.js'

const actions = {
  getSysConfig: (context) => {
    sysConfig.getSysConfigs().then(res => {
      context.commit(
 
'config/setSys', res.data)
    })
  }
}

其中sysConfig.getSysConfigs()為定義的全域性方法，會在下面說明

在目錄store下建立檔案getters.js：

const getters = {
  sys: state => state.config.sys
}
export default getters

在目錄store下建立檔案index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from 
 
'./actions'
import config from './modules/config'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    config
  },
  getters,
  actions
})

export default store

全域性方法的定義：

在目錄api下建立sysConfig.js:

import axios from '@/utils/request'
import base from '../base' // 匯入介面域名列表

const sysConfig = {

  // 獲取sysConfigs 系統配置
  getSysConfigs() {
    return axios.get(`${base.url}/params/get-sys-configs`)
  },
}

export default sysConfig

在目錄api下建立index.js:

/**
 * api介面的統一出口
 */
import sysConfig from './sysConfig.js'

// 匯出介面
export default {
  sysConfig
}

全域性主檔案main.js：

import Vue from 'vue'

import ElementUI from 'element-ui'
import api from './api'
import store from './store'
// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式宣告
Vue.use(ElementUI)
import App from './App'
import router from './router'

Vue.prototype.$api = api
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

這裡注意全域性方法的匯入方式略有不同：Vue.prototype.$api=api

注意這裡使用 inport 預設匯入的是目錄下的index.js 否則需寫明檔名！！！

全域性變數的賦值：

html中：<divclass="search-box" @click="$store.commit('config/setSys', {'id': '123', 'name': 'name'})"/>

js中： this.$store.commit('config/setSys', {'id': '123', 'name': 'name'})

全域性變數的取值：

html中：<divclass="search-box" @click="$store.getters.sys.name"/>

js中： this.$store.getters.sys.name

全域性方法的呼叫：

this.$api.sysConfig.getSysConfigs().then(res => {}).catch(_error => {}).finally()

因此處全域性方法是請求ajax的，所以會有： 請求成功回撥 then，請求出錯回撥 catch， 和無論請求成功還是失敗都會呼叫的 finally

具體的全域性方法需在實際開發應用中定義使用！！！

每天進步一點點，點滴記錄，積少成多。

以此做個記錄，

如有不足之處還望多多留言指教！