js定义全局变量 vue页面_使用vue.js怎么定义全局变量？

使用vue.js怎么定义全局变量？下面本篇文章给大家介绍一下在 Vuejs 项目中如何定义全局变量。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

一、在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值。

全局变量模块 Global.jsconst colorList = [

'violet',

'orange',

'blue',

'darkyellow',

'wheat',

]

const colorListLength = 5

export default

{

colorList,

colorListLength

}

模块里的变量用export 抛出去，当需要使用时，引入模块global。

需要使用全局变量的模块 html.vue

{{item}}

import global_ from './components/Global'

export default {

data () {

return {

getColor: global_.colorList

}

}

}

二、在程序入口的 main.js 文件里面，将全局变量模块挂载到Vue.prototype 。

Global.js同上，在main.js里加下面代码import global_info from './components/Global'

Vue.prototype.GLOBAL = global_info

挂载之后，在需要引用全局量的模块处，不需再导入全局量模块，直接用this就可以，如下:

export default {

data () {

return {

getColor: this.GLOBAL.colorList

}

}

}

三、使用VUEX存储状态值

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

store.js定义import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

// 创建vuex的store

export default new Vuex.Store({

state: {

count: 1

},

// 更改store的状态

mutations: {

increment(state) {

state.count++;

},

decrement(state) {

state.count--;

}

},

// 有异步的时候， 需要action

actions: {

increment(context) {

context.commit("increment");

},

decrement(context) {

setTimeout(function() {

context.commit("decrement");

}, 10);

}

},

// 通过getter 进行数据获取

getters: {

getState(state) {

return state.count > 0 ? state.count : 0;

}

}

});

在main.js，引入store.jsimport store from "./store/index";

new Vue({

router,

store,

render: h => h(App)

}).$mount("#app");

在页面模块直接使用store调用count=this.$store.state.count

四、使用window存储变量

创建 global.jsconst config = {

name:'ochmd',

age:"num"

}

let bindToGlobal = (obj, key) => {

if (typeof window[key] === 'undefined') {

window[key] = {};

}

for (let i in obj) {

window[key][i] = obj[i]

}

}

bindToGlobal(config,'_const')

在模块页面使用window._const.name //ochmd

更多web前端开发知识，请查阅 HTML中文网 ！！