Vue中 Vue.prototype 详解及使用

我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

1. 基本示例

在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName='My App'

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以

newVue({
  beforeCreate:function(){
    console.log(this.$appName)}})

控制台会打印出 My App，就这么简单！

2. 为实例prototype设置作用域

为什么 appName 要以 $ 开头？这很重要吗？
这里没有什么魔法。$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
如果我们设置：

Vue.prototype.appName='My App'

那么如下的代码输出什么：

newVue({
  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，来避免和插件或未来的插件相冲突。

3. 注册和使用全局变量

每个组件都是一个vue实例，Vue.prototype加一个变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。
比如以下例子：

// main.jsimport Vuefrom'vue'import Appfrom'./App'import routerfrom'./router'import storefrom'./store'

Vue.config.productionTip=false
Vue.prototype.$appName='main'newVue({
    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>exportdefault{
  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

4. 原型方法的上下文

在 JavaScript 中一个原型的方法会获得该实例的上下文,也就是说可以使用 this 访问：数据、计算属性、方法或其它任何定义在实例上的东西。
让我们将其用在一个名为 $reverseText 的方法上：

// main.js
Vue.prototype.$reverseText=function(propertyName){this[propertyName]=this[propertyName].split('').reverse().join('')}

// 相应组件<script>exportdefault{data(){return{
      message:'Hello'}},created(){
    console.log(this.message)// => "Hello"this.$reverseText('message')
    console.log(this.message)// => "olleH"}}</script>

5. 应用示例

5.1 引入 axios

npm install vue-axios--save

npm install qs.js--save//它的作用是能把json格式的直接转成data所需的格式

// mian.jsimport Vuefrom'vue'import axiosfrom'axios'import qsfrom'qs'

Vue.prototype.$axios= axios//全局注册，使用方法为:this.$axios
Vue.prototype.qs= qs//全局注册，使用方法为:this.qs

// 相应组件<script>exportdefault{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>