美文网首页
vue 设置全局配置变量

vue 设置全局配置变量

作者: Do_Du | 来源:发表于2020-05-19 16:37 被阅读0次

在src目录下设置配置变量

module.exports = {
  title: '我是标题',
  fixedHeader : true
}

使用一:在.vue文件中使用

引入

impot defaultSettings from '@/settings'
const {title} = defaultSettings 

export default {
  name: 'SidebarLogo',
  data() {
    return {
      title: title
    }
  }
}

使用二:在.js文件中使用 【vue.config.js】

const defaultSettings = require('./src/settings.js')
const name = defaultSettings.title || 'vue Admin Template'

module.exports = {
  configureWebpack: {
    name: name, // 在这里赋值
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
}

使用:在index.html中调用这个name值

<title><%= webpackConfig.name %></title>

即为网页标签名


image.png

使用三:在状态管理器store - setting.js文件中使用

import defaultSettings from '@/settings'
const {  fixedHeader } = defaultSettings

const state = {
  fixedHeader : fixedHeader 
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在store-index.js中

import settings from './modules/settings'
Vue.use(Vuex)

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

export default store

在.vue中调用

computed:{
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    }
}

相关文章

网友评论

      本文标题:vue 设置全局配置变量

      本文链接:https://www.haomeiwen.com/subject/govbohtx.html