51工具盒子
今天我们来聊聊Vue.prototype和config.globalProperties，如果学习过vue3，就会知道前者是vue2的，后者是vue3的，至于他们的方法和应用法则，我们一起看下吧。
Vue.prototype
我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
{#1__1}基本示例
在main.js中添加一个变量到 Vue.prototype
Vue.prototype.$appName = 'My App'
这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
控制台会打印出 My App，就这么简单！
- 为实例prototype设置作用域
为什么 appName 要以 $ 开头？这很重要吗？
这里没有什么魔法。$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果我们设置：
Vue.prototype.appName = 'My App'
那么如下的代码输出什么：
new Vue({
data: {
// 啊哦，`appName` 也是一个我们定义的实例 property 名！
appName: 'The name of some other app'
},
beforeCreate: function () {
console.log(this.appName)
},
created: function () {
console.log(this.appName)
}
})
日志中会先出现 "My App"，然后出现 "The name of some other app"，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。
注册和使用全局变量
每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如以下例子：
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$appName = 'main'
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>',
})
// 给所有组件注册了一个属性 $appName，赋予初始值 'main' ，所有组件都可以用 this.$appName 访问此变量;
// 如果组件中没有赋值，初始值都是'main'
日志中会先出现 "My App"，然后出现 "The name of some other app"，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。
注册和使用全局变量
每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如以下例子：
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$appName = 'main'
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>',
})
// 给所有组件注册了一个属性 $appName，赋予初始值 'main' ，所有组件都可以用 this.$appName 访问此变量;
// 如果组件中没有赋值，初始值都是'main'
// home.vue
<template>
<div>
<div @click="changeName">change name</div>
<div @click="gotoTest2">goto test2</div>
</div>
</template>
<script>
export default {
methods:{
changeName(){
this.$appName = "test1"
},
gotoTest2(){
this.$router.push('/about')
}
}
}
</script>
// about.vue
<template>
<div>
<div>{{this.$appName}} in test2</div>
</div>
</template>
点击 home 中的 change name 再跳转about，about里面还是显示 main in test2
如果要实现全局变量的功能，需要把属性变为引用类型
Vue.prototype.$appName = { name: 'main' }
后面使用 this.$appName.name 改变和引用相应的值
这进入 about 后显示 test1 in test2
原型方法的上下文
在 JavaScript 中一个原型的方法会获得该实例的上下文,也就是说可以使用 this 访问：数据、计算属性、方法或其它任何定义在实例上的东西。
让我们将其用在一个名为 $reverseText 的方法上：
// main.js
Vue.prototype.$reverseText = function (propertyName) {
this[propertyName] = this[propertyName]
.split('')
.reverse()
.join('')
}
// 相应组件
<script>
export default {
data() {
return{
message: 'Hello'
}
},
created() {
console.log(this.message) // => "Hello"
this.$reverseText('message')
console.log(this.message) // => "olleH"
}
}
</script>
应用示例
引入 axios
npm install vue-axios --save
npm install qs.js --save //它的作用是能把json格式的直接转成data所需的格式
// mian.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
// 相应组件
<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //这里是发送给后台的数据
userId:this.userId,
token:this.token,
})
}).then((response) =>{ //这里使用了ES6的语法
console.log(response) //请求成功返回的数据
}).catch((error) =>{
console.log(error) //请求失败返回的数据
})
}
}
</script>
好啦，关于Vue.prototype的应用就说这么多。
config.globalProperties
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
- 类型
interface AppConfig {
globalProperties: Record<string, any>
}
详细信息
这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。
如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。
用法
app.config.globalProperties.msg = 'hello'
这使得 msg 在应用的任意组件模板上都可用，并且也可以通过任意组件实例的 this 访问到：
export default {
mounted() {
console.log(this.msg) // 'hello'
}
}
