vue定义全局变量

时间: 2019-06-06阅读: 620标签: 变量

VUE.js 中涉及到JS全局变量


一、全局变量专用模块得引入

全局变量模块 Global.js

const colorList = [
 'violet',
 'orange',
 'blue',
 'darkyellow',
 'wheat',

]
const colorListLength = 5
export default
{
 colorList,
 colorListLength
}

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

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

<template>
 <ul>
  <template v-for="item in mainList">
  <div v-for="item in getColor" :key="item">
   {{item}}
  </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from './components/Global'
export default {
 data () {
  return {
   getColor: global_.colorList
  }
 }
}
</script>


二、全局变量模块挂载到Vue.prototype 。

Global.js同上,在main.js里加下面代码

import global_info from './components/Global'
Vue.prototype.GLOBAL = global_info

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

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.colorList
  }
 }
}
</script>


三、使用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.js

import store from "./store/index";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

在页面模块直接使用store调用

count=this.$store.state.count


四、使用window存储变量

创建 global.js

const 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


链接: http://www.fly63.com/article/detial/3572

js变量提升

首先先看下变量提升的规则:1.变量声明、函数声明都会被提升到作用域顶处;2.当出现相同名称时,优先级为:变量声明 < 函数声明 < 变量赋值,我们看下代码在js编译器的实际运行顺序,结合规则看下你就懂了

Js中的变量提升

变量提升是 Javascript 中一个很有趣,也让很多人迷惑的特征。那么,Javascript 为什么要设计这个特征呢?我来看 Javascript 创始人 Brendan Eich 的 twitter:

ES6 变量和函数参数的临时死区

ES6的第一章便是讲新增了let和const这两个变量,可以用于定义块级作用域的变量。相对于于var定义的变量,由let和const定义的变量作用域不会被提升。但是值得注意的是,由let和const定义的变量还拥有一个会让人恨容易犯错的特性:临时死区

什么是解构赋值?

解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,给我们编程带来便利。

Js变量的扩展与解构

在ES6之前定义变量都是用var这个关键字,var是在全局的环境下声明的一个变量,而且这个变量有一个变量的提升;也就是说,即使把变量放在后面,但是JavaScript引擎的运行的时候会把变量提到代码的最上层,然后先声明再赋值

Js中变量声明效率问题

应该是JavaScript中访问变量中具体值时:【theVar1】的形式要比【theVar.theVar1】要快。也就是说,【多个具有联系的常量值独自定义成多个变量】的做法的效率要比【多个具有联系的常量值定义成一个变量的多个属性】来得高

ES5中的私有变量

严格来讲,JavaScript中没有私有成员的概念;所有对象属性都是公有的。不过,倒是有一个私有变量的概念。任何在函数中定义的变量,都可以认为是私有变量,因为不能在函数的外部访问这些变量

从.env文件中为Node.js加载环境变量

使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。存储环境变量的一种方法是将它们放在 .env 文件中。这些文件允许你指定各种环境变量及其相应的值。

ES5中的静态私有变量

通过在私有作用域中定义私有变量或函数,同样也可以创建特权方法,基本模式如下:这个模式创建了一个私有作用域,并在其中封装了一个构造函数及相应的方法。在私有作用域中,首先定义了私有变量和私有函数

揭秘Js变量提升

变量提升是一个陈旧且令人困惑的术语。甚至在 ES6之前:变量提升的意思究竟是“提升至当前作用域顶部”还是“从嵌套的代码块中提升到最近的函数或脚本作用域中”?还是两者都有?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全