关于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

具体的全局方法需在实际开发应用中定义使用！！！

 

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！