vue定义全局变量

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

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


JS中this作用域的问题:常见报错:XXX function 或者变量 未定义

定义了全局的函数,但是使用的时候,报错XXX 函数或者变量未定义,但实际上js中明明已经定义了且正确;大多数是因为调用过程中this.functionname 或者this.varname中this指向的作用域问题

CSS:var变量的局部作用域(继承)特性

CSS变量非全局:最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局。举个例子,如下HTML和CSS:CSS也越来越具有动态特性了

Node常用的全局变量与 Inspect 调试

在 Node 中常用的全局方法有 CommonJS、Buffer、process、console、timer 等,这些方法不需要 require引入 API 就可以直接使用。如果希望有属性或方法可以“全局使用”,那就将它挂载在 Node 的global对象上:

JavaScript 的共享传递和按值传递

我们可以说原始数据类型和引用数据类型的副本作为参数传递给函数。不同之处在于,在原始数据类型,它们只被它们的实际值引用。JS不允许我们获取他们的内存地址,不像在C与C++程序设计学习与实验系统

js 交换变量值的方法总汇

这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值

JS中变量的存储

JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象

ES6-变量的解构赋值

解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。

let与var的区别,为什么要用let?

var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局

CSS变量使用解析

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

一个例子,变量提升和函数提升就是这么简单!

引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。

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

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

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