全局变量的几种实现方式

注:本文仅对这几种方式进行简短的阐述,作为记录。

我们在写代码时免不了要对一些变量进行一些存储,但有时这些变量或常量使用到的频率又非常高,不论从优化代码解决冗余还是少给自己添不必要的麻烦看,把这些重复的变量进行统一存储和管理是必要的。

1.公用模块

定义一个专用的模块,如在项目里common目录下建立一个heip.js的文件用来定义方法,然后在其他界面引入该模块或去该公用方法(可对不同的方法选择性进行引入)。

如:import {getToken} from "./global";

2.挂载Vue.prootype

将一些使用频率高的常量或方法,直接拓展到Vue.prototype上,每个Vue对象都会继承下来。然后在main.js中挂载。

import {jumpTo,isWx} from './units/global';
Vue.prototype.jumpTo = jumpTo
Vue.prototype.isWx = isWx
这样的话就可以在其他界面直接调用就可以使用了。
 
3.globalData
小程序里的globalData概念,在APP上全局声明变量一次,会继承到全局所有界面。
如:赋值:getApp().globalData.text = 'test';取值:console.log(getApp().globalData.text) // 'test'。
 
4.Vuex
vuex作为专为vue.js应用程序开发的状态管理模式,它采用集中存储管理应用的所有组件的状态。
实际使用:
  在根目录下新建store目录,在store目录下创建index.js定义状态值,然后在main.js挂载Vuex。
  main.js:
  imoprt store from ‘./store’
  
  new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  })

一次奥迪

原文地址:https://www.cnblogs.com/yangc6925/p/11684140.html