Question

我正在使用asiox / vuejs创建一个网页。但是，我想进一步划分代码。一个示例是我使用axios向后端发出请求，并将响应中的数据提交到vuex中。

this.$axios.get('events').then((response) => {
  this.$store.commit('data/populate', response.data)
})
.catch((e) => {
  console.error(e)
})

我想为此编写一个util方法，例如this.$populate.events()

我尝试在plugins/目录内创建实用程序，但他们无权访问this.$axios或this.$store

请注意，我在axios中导入了vuex和nuxt.config.js

如何实现？

Answer 1

如果您需要context中的函数，可以使用Vue实例，甚至   在Vuex商店中，您可以使用注入功能，即   插件导出功能的第二个参数。

将内容注入Vue实例的过程与执行此操作类似   在标准Vue应用中。 $将自动添加到   功能。

Reference

export default ({ app, store }, inject) => {
  inject("populate", () => {
    app.$axios
      .get("events")
      .then(response => {
        store.commit("data/populate", response.data);
      })
      .catch(e => {
        console.error(e);
      });
  });
};

app变量是context属性。

包含所有插件的Vue根实例实例选项。对于例如，使用axios时，您可以通过访问$axios context.app.$axios。

Answer 2

在发布后不到5分钟就发现了...

基本上是use this nuxt guide

在您要移动的方法中，将this替换为app

Nuxt / Vuejs-如何创建可以访问模块的工具？

2 个答案: