Nuxt/Vuejs - How to create utils that have access to modules?

Question

I am using asiox/vuejs to create a webpage. However I want to compartmentalize the code more. One example is I use axios to make requests to the backend, and the data in the response is commited into vuex.

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

I want to write a util method for this, like this.$populate.events()

I have tried creating utils inside the plugins/ directory, but they dont have access to this.$axios or this.$store

Note that I have axios and vuex imported in nuxt.config.js

How can this be achieved?

Andrew Vasylchuk · Accepted Answer · 2019-08-01 17:30:27Z

1

If you need the function in the context, Vue instances and maybe even in the Vuex store, you can use the inject function, which is the second parameter of the plugins exported function.

Injecting content into Vue instances works similar to when doing this in standard Vue apps. The $ will be prepended automatically to the function.

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 variable is context property.

The root Vue instance options that includes all your plugins. For example, when using axios, you can get access to $axios through context.app.$axios.

answered Aug 1, 2019 at 17:30

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isebarn · Accepted Answer · 2019-08-01 17:26:49Z

0

Figured it out not 5 minutes after posting ...

Basically use this nuxt guide

And replace this with app in the method you'd like to move

answered Aug 1, 2019 at 17:26

isebarn

3,9805 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Nuxt/Vuejs - How to create utils that have access to modules?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related