Vue进阶 | 实现全局变量的几种方式

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

当项目中涉及到多个页面共用数据时，配置Vue的全局变量更有利于数据的管理和维护

方法一：

1. 在/src/utils/目录下建立一个自定义的js文件（或写在/src/utils/index.js中），
2. 定义+导出。比如定义一个适应手机端的变量isMobile，根据屏幕尺寸监听变化

const isMobile = false

export {
    isMobile
}

或者使用函数的形式，对数据处理后返回：

export function resizeFn() {
  return document.documentElement.clientWidth <= 800
}

3. 在main.js文件中全局挂载

import { isMobile } from '@/utils/xxx.js';

Vue.prototype.isMobile = isMobile

4. 使用

   在页面中console.log(this.isMobile)可以看到输出的结果，template直接{{isMobile}}即可

5. 弊端：

   全局变量存在不能够及时刷新的问题，当变量的值修改，页面的视图不会更新。

   所以当需要实时更新的数据作为全局变量时，这种方法并不是最佳选择

方法二：vuex

它可以集中式存储管理应用的所有组件的状态（但使用 Vuex 可能是繁琐冗余的）

在main.js引入并注册store后，就可以在文件中进行配置，store中的状态是响应式的

使用方法：

1. 创建一个store实例，变量定义在state中，状态变更时触发的方法放在mutations中

2. 触发状态变更

（不可以直接改变store.state.obj的值来达到这种效果）

store.commit('setObj')

注：

• 在配置文件中，可以使用store.state.obj来获取值

• 在页面中需要this.$store.state.count来获取，也可以在函数中触发变更状态：this.$store.commit('setObj')

遇到的问题&解决：

设置一个全局的变量，存放对象，在打开页面的时候调用接口，但是在第一次打开页面的时候全局变量值为空（此时接口数据尚未返回），而页面已经渲染完毕。可以看到页面能够展示出数据（次数数据已经获取到，视图更新），但控制台报出了第一次加载时未获取到数据的错误。

解决：在公共文件中初始化变量的时候赋值一个空的状态，包含所有页面会调用到的对象的key，并 store.commit('')触发一次状态变更。