插件

Vue.js 插件是一种向 Vue.js 全局添加自定义功能的方法。插件的良好候选者是应用程序的核心并被广泛使用。候选插件的经典示例是翻译/国际化库（例如 i18n-next）和 HTTP 客户端（例如 axios、fetch 和 GraphQL 客户端）。插件初始化程序可以访问 Vue 实例，因此它是包装全局指令、mixin、组件和过滤器定义的好方法。

插件可以通过注册指令和过滤器来注入功能。他们还可以添加全局(global)和实例(instance) Vue.js 方法，以及定义全局组件 mixin。

Vue.js 插件是一个公开 install 方法的对象。使用 Vue 和 options 参数调用安装函数：

const plugin = {
    install(Vue, options) {}
}

在 install 方法中，我们可以注册指令、过滤器和 mixin，并添加全局(global)和实例(instance)属性和方法：

const plugin = {
    install(Vue, options) {
        Vue.directive('fade', { bind() {} })
        Vue.filter('truncate', str => str.slice(0, 140))
        Vue.mixin({
            data() { return { empty: true } }
        })
        Vue.globalProperty = 'very-global-value'
        Vue.prototype.$myInstanceMethod = function() {}
    }
}

插件使用 Vue.use 方法注册：

import plugin from './plugin'

Vue.use(plugin)

Vue.use 也可以传递选项作为第二个参数。这些选项传递给插件：

Vue.use(plugin, { optionProperty: true })

Vue.use 的功能之一是它不允许您两次注册同一个插件。这是一个很好的功能，可以避免多次尝试实例化或安装同一插件时出现边缘情况行为。

与 Vue.js 结合使用的流行 HTTP 客户端是 axios。 通常使用拦截器或 axios 选项配置 axios 来实现重试、传递 cookie 或跟踪重定向等功能。

axios 可以使用以下命令安装：npm install –save axios。

练习 5.02：创建自定义 Axios 插件

为了避免必须添加 import axios from 'axios' 或必须将自定义 axios 实例包装在 http 或 Transport 内部模块下，我们将自定义 axios 实例注入到 Vue.axios 和 this.axios 下的 Vue 对象和 Vue 组件实例中。这将使我们的应用程序使用起来更容易、更符合人体工程学，因为我们的应用程序需要使用 axios 作为 HTTP 客户端来调用 API。要访问本练习的代码文件，请参阅 https://packt.live/36po08b 。

我们将从一个干净的 Vue CLI 项目开始（可以使用 vue new exercise5.02 命令创建）。Vue CLI 项目中的应用程序可以通过 npm run serve 启动。

请按照以下步骤完成本练习：

  1. 为了正确组织我们的代码，我们将在 src/plugins 中创建一个新文件夹，并在 src/plugins/axios.js 中为 axios 插件创建一个新文件。在新文件中，我们将搭建 axios 插件：

    import axios from 'axios'
export default {
    install(Vue, options) {}
}

  2. 我们现在将在 src/main.js 中的 Vue.js 实例上注册我们的 axios 插件：

    // other imports
import axiosPlugin from './plugins/axios.js'

// other code
Vue.use(axiosPlugin)
// Vue instantiation code

  3. 我们现在将使用以下命令通过 npm 安装 axios。这将允许我们导入 axios 并通过插件将其公开在 Vue 上：

    npm install --save axios

  4. 我们现在将 axios 添加到 Vue 作为 src/plugins/axios.js 中的全局属性：

    import axios from 'axios'
export default {
    install(Vue) {
        Vue.axios = axios
    }
}

  5. axios 现已在 Vue 上可用。在 src/App.vue 中，我们可以向 API 发出请求，该请求将填充待办事项(todos)列表：

    <template>
    <div id="app">
        <div v-for="todo in todos" :key="todo.id">
            <ul>
                <li>Title: {{ todo.title }}</li>
                <li>Status: {{ todo.completed ? "Completed" :  "Not Completed" }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    async mounted() {
        const { data: todos } = await Vue.axios('https://jsonplaceholder.typicode.com/todos')
        this.todos = todos
    },
    data() {
        return { todos: [] }
    }
}
</script>

    以下是预期输出：

    image 2023 10 13 19 31 24 217
    Figure 1. Figure 5.6: Global Vue.axios todo display sample

  6. 在我们的例子中，必须添加 import Vue from 'vue' 有点奇怪。前面通过插件注入 axios 的全部目的是摆脱上面导入模板。暴露 axios 的更好方法是通过 组件实例；即 this.axios。 为此，我们需要更新 src/plugins/axios.js 文件中的安装步骤，并将 axios 添加到 Vue.prototype 中，以便任何新的 Vue() 组件都将其作为属性：

    // imports
export default {
    install(Vue, options) {
        // other plugin code
        Vue.prototype.axios = axios
    }
}

  7. 我们现在可以从 'vue' 行中删除 import Vue 并通过 src/App.vue 中的 this.axios 访问 axios：

<script>
export default {
    async mounted() {
        const { data: todos } = await this.axios('https://jsonplaceholder.typicode.com/todos')
        this.todos = todos
    },
    data() {
        return { todos: [] }
    }
}
</script>

以下是输出：

image 2023 10 13 19 36 34 018
Figure 2. Figure 5.7: Vue instance axios todo display sample

至此，我们使用了一个插件来注入 全局和实例级属性和方法，并学习了如何使用它们以易于分发的格式创建指令和其它 Vue 结构。

现在我们来看看全局注册组件如何帮助减少代码库中高用量组件的模板。