有个问题我还是想深入研究一下
就是关于 vue 中全局变量这个概念 和实现方法的探讨

不少人想都没想, 直接用vuex啊。
对啊, 我也是这个样想的 直接用vuex不就啥事没有了。

vuex支持 定义 修改。
还会实时刷新, 用来记录状态 再好不过

但是其他方式 还是有它的优势的。

方法一 (Vue.prototype)

最简单的方法, 也是最常见的

// main.js

import axios from 'axios'
// 挂载全局方法
Vue.prototype.$http = axios;
Vue.prototype.$Fun = (a = "无") => {
  console.log('$Fun执行, 参数: ' + a);
}

// 挂载全局属性
Vue.prototype.$name = "DWP";
// 任意合法页面 1
console.log(this.$name);   // DWP
console.log(this.$Fun());  // $Fun执行, 参数: 无


this.$name = "DWPNB";
// 检测 全局属性的 读
console.log(this.$name); // DWPNB  ...页面的渲染是不会跟新的
console.log(this.$Fun()); // $Fun执行, 参数: 无

// 任意合法页面 2
console.log(this.$name); // DWP  ...变量实际上并没有更改
console.log(this.$Fun()); // $Fun执行, 参数: 无

结论:

查: 无论是获取变量值, 还是执行方法 都是ok的
改: 页面的渲染是不会跟新的, 并且在其他页面变量还是原来的值

Vue.prototype.xxxx 挂载的是类似常量的东西。
建议 注意使用

方法二 (window._name)

这种方法就比较原始了

// main.js
// 挂载全局属性
window._name = "dwp";
// 挂载全局方法
window._Fun = (a = "无") => {
  return '$Fun执行, 参数: ' + a
}
// 任意合法页面 1
// 检测 全局属性的 读
console.log(_name);  // dwp
console.log(_Fun()); // $Fun执行, 参数: 无
 _name = "DWPNB";


// 任意合法页面 2
console.log(_name);  // DWPNB
console.log(_Fun()); // $Fun执行, 参数: 无

结论:

查: 无论是获取变量值, 还是执行方法 都是ok的
改: 只要是被修改了, 在这个项目中无论那个位置获取这个值, 都是被修改的值

window._xxxx 就是相等于, 定义了一个变量,

但是这个变量无法直接渲染到项目, 同时也过于灵活。
不建议这样使用

方法三 (vuex) 推荐

这是关于vuex的简绍使用
https://blog.csdn.net/dwp_wz/article/details/107976732
vuex就不过多介绍了, 会的人 自然会 不会的 看完我写的 也会用了

Logo

前往低代码交流专区

更多推荐