使用 prototypes 访问 Vue.js 中的全局属性-Js中文网

在本文中，你将了解到如何在 Vue.js 中使用 prototypes 来访问全局属性，而不是在工作流中使用多个导入来访问。

在开始之前

这篇文章适合所有阶段的开发人员，包括初学者。在学习本教程之前，您应该准备好以下几点：

已安装 node.js 10.x 及以上版本。你可以在你的 terminal / 命令行中用下面的命令来验证是否已经安装：


node -v

一个代码编辑器 — 我强烈推荐 Visual Studio Code
你的电脑上已全局安装了 Vue 的最新版本
已安装了 Vue CLI 3.0。安装之前，需要先卸载老版本的 CLI：


npm uninstall -g vue-cli

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

然后，安装新版本：


npm install -g @vue/cli

下载一个 Vue 起步项目下载
解压下载下来的项目
进入解压后的文件夹并运行下面的命令，让所有的依赖保持最新：


npm install

导入如何访问文件

当开发 Vue 项目时，在另一个组件或嵌套组件中访问新组件最快的方式就是导入所需的组件或资源。

但是，这很容易变得效率低下，因为你必须重复声明 import，甚至给每个 import （如果导入的是组件的话）注册组件。幸好，对于全局定义的数据对象或传入的 HTTP 请求，Vue 提供了一种更有效的方法来处理这种情况。

Vue. prototype

要在 Vue 应用中创建一个全局属性，然后通过属性声明而不是 import 语句来访问它，Vue 提供了一个我们称为原型的平台。通过这种方式，你可以定义全局属性或数据对象，告诉 Vue 将其看成一个对象，然后只需使用一行代码就可以在任何组件中访问它。

Prototype 语法

在你主 JavaScript 文件中，一个 Vue prototype 的定义类似下面这样：


Vue.prototype.$blogName = ‘LogRocket’

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

这里，blogname 是属性或数据名，而字符串 ‘LogRocket’ 是对应的值。有了这个定义，Vue.js 就可以在整个项目的每个 Vue 实例中，甚至在实例创建以前，获取该属性（本例中就是 blogname）。

$符

Vue.js 中使用 $ 符来标识可以在任何给定的 Vue 项目中的所有可用实例中使用的属性。

Demo

要完成这一部分，你必须已经从头阅读了这篇文章，从上面的链接中下载了启动项目，并在 VS Code 中打开了它。为了说明上文中的语法示例，请打开你的 main.js 文件并添加原型定义，整个文件看起来像这样：


import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.prototype.$blogName = 'LogRocket'
new Vue({
  render: h => h(App),
}).$mount('#app')

现在你已经定义了一个属性名，打开根组件并将下面的代码块复制进去：


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>

这里，你可以看到 beforeCreate 钩子函数被用来验证有关 Vue 原型的实例化声明。如果在 dev server 中运行该应用，你会在浏览器的控制台中看到已保存的名称（LogRocket）。

一些 Vue prototype 的使用案例

许多数据值、属性和实用程序（如 HTTP 资源）都可以通过 Vue 原型成为全局属性。在这一部分中，我将介绍其中的一些。

函数作为原型

Vue.js 不仅允许添加属性，还允许添加方法作为原型。这样，使用原型的每个实例都可以访问原型定义中设置的逻辑。

这包括使用 this 访问数据，计算属性，甚至是项目中任何 Vue 实例里的其他方法。一个简单的例子就是使用字符串反转函数。在你的 main.js 文件中，将新原型添加到之前的原型下：


Vue.prototype.$reverseString = function(x) {
  this = this
    .split('')
    .reverse()
    .join('')
}

复制下面的代码到你的 app.vue 文件中：


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket'
    }
  },//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com
   beforeCreate: function() {
    console.log(this.$blogName)
  },
  created: function() {
    console.log(this.msg)
    this.$reverseString('msg')
    console.log(this.msg)
  }
}
</script>

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

这里，created 钩子函数被用来打印 reverseSting 函数的日志，如果你在 dev server 中运行该应用程序，你会看到 LogRocket 被反向打印。

使用原型导入

如果你的应用程序与第三方 API 通信，通常你必须在每个你想发送 get 请求的组件中导入 Axios。下面是一个简单的例子 — 在你的 VS Code 应用中打开一个新的 terminal，然后安装 Axios：


npm install axios

现在，打开你想发送 get 请求的 app.vue 文件，将下面的代码复制进去：


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test msg="Welcome to Your Vue.js App"/>
    <div v-for="user in users" :key="user.id">
      <p>{{user.name}}</p>
    </div>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket',
      users: []
    }
  },
  created: function (){
      axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        this.users = res.data;
      })
  }//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com
  ,
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>

你会注意到，每个你要发送 get 请求的组件，你都必须重复这个 import 语句。为了解决这个问题，Vue 允许你使用原型功能一次性导入到你项目中的每个 Vue 实例中。

打开你的 main.js 文件，并复制下面的代码进去：


import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$blogName = 'LogRocket'
Vue.prototype.$reverseString = function(x) {
  this = this
    .split('')
    .reverse()
    .join('')
}
Vue.prototype.$axios = axios
new Vue({
  render: h => h(App),
}).$mount('#app')

在你的 app.vue 文件中，删除 import 语句并使用你创建的 $axios 别名，像这样：


<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  },
  data() {
    return {
      msg: 'LogRocket',
      users: []
    }
  },
  created: function (){
      this.$axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        this.users = res.data;
      })
  }
  ,
   beforeCreate: function() {
    console.log(this.$blogName)
  }
}
</script>