全局变量的几种实现方式

Posted 2020-11-16 yangc6925

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

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

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/>‘

　　})

一次奥迪