【axios使用】Vue中 Vue.prototype 详解及使用

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

1. 基本示例
在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'
1
这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以

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



控制台会打印出 My App,就这么简单!

2. 为实例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,来避免和插件或未来的插件相冲突。

3. 注册和使用全局变量
每个组件都是一个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: '',
})

// 给所有组件注册了一个属性 $appName,赋予初始值 'main' ,所有组件都可以用 this.$appName 访问此变量;
// 如果组件中没有赋值,初始值都是'main'

 

// home.vue



 

// about.vue



点击 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('')
}



// 相应组件



5. 应用示例
5.1 引入 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


 


// 相应组件

如果出现跨域问题,请看下一篇文章

你可能感兴趣的:(vue.js,原型模式,javascript)