關於vue項目全局變量定義、賦值與取值以及全局方法的定義和使用

關於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中：<div class="search-box" @click="$store.commit('config/setSys', {'id': '123', 'name': 'name'})" />

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

 

全局變量的取值：

html中：<div class="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

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

 

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

以此做個記錄，

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