using mixins inside plugin vue

Question

I have a requirement where in app startup , we have to make an Axios call and get some value..that values should be available to all application... they are some meta data's in server side and should be fetched only once during the app initialization... I have approached it by defining a mixin inside the plugin and hope to get the values inside the components..In that case , where should i do the axios call? inside the mixin or plugin?

    import Vue from 'vue'
import Axios from 'axios'
const StudentCoinPlugin = {
  install (Vue, options) {
    Axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        Vue.mixin({
          mounted () {
            console.log('Mounted!Plugin----------')
          },
          data: function () {
            return {
              globalReadOnlyProperty: this.response.data.time.updated
            }
          }
        })
      }
      )
  }
}

Is it the right thing to do? Or what is the best approach to read some values and get it in the global scope when application starts?

In my opinion, put it inside the mounted hook. While it will work the way you have in your code, it kind of awkward to wrap the installation of mixin inside a then block. — jofftiquez
– jofftiquez, Commented Jul 7, 2019 at 4:23

jofftiquez · Accepted Answer · 2019-07-07 04:25:39Z

1

In my opinion, put it inside the mounted hook. While it will work the way you have in your code, it kind of awkward to wrap the installation of mixin inside a then block.

import axios from 'axios';

async function fetchData(params) {
  // do axios call here 
}

const StudentCoinPlugin = {
  install (Vue, options) {
    Vue.mixin({
      async mounted () {
        console.log('Mounted!Plugin----------');
        await fetchData();
      },
      data: function () {
        return {
          globalReadOnlyProperty: this.response.data.time.updated
        }
      }
    })
  }
}

answered Jul 7, 2019 at 4:25

jofftiquez

7,70810 gold badges71 silver badges123 bronze badges

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

6 Comments

Janier Over a year ago

Does it get invoked always?i hope to make it a one time loading during application startup

Janier Over a year ago

Mounted gets invoked for each component?

jofftiquez Over a year ago

Mounted will be invoked to every component since you installed the mixin globally.

Janier Over a year ago

Then do i need a plugin?can i just go ahead with a global mixin? I just need to hit the server when vue starts and get those values and make them avaialble for components

Janier Over a year ago

may be is there an easier version of what i am trying to achieve.. i read Plugin is for all one time activities.. Can you please tell me if a mixin alone is sufficient?

|

Collectives™ on Stack Overflow

using mixins inside plugin vue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related