VueJS конфликт плагинов

Question

Я создал два плагина в своем приложении VueJS, работающем на Vue CLI 4, но когда я попытался использовать его на своей странице, работал только один

| plugins
|-- axios.vue
|-- authentication.vue

ax ios. vue

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$myName = "Dean Armada";
};

Vue.use(Plugin);

export default Plugin;

аутентификация. vue

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$name = "Chris Guinto";
};

Vue.use(Plugin);

export default Plugin;

main. js

import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

инструкции. vue

<template>
  <div>
      Hello World
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$name);
      console.log(this.$myName);
    }
  }
</script>

<style lang="scss" scoped>

</style>

ПРИНИМАТЬ ЗАМЕТКУ

• Выходными данными выше будут только "Дин Армада" и console.log(this.$name) не определено
• Но если я закомментировал, Vue.use(axios) будет работать console.log(this.$name), так что вывод будет "Chris Guinto", а другой не определен, потому что плагин axios не активирован

Так как мне заставить их работать одновременно?

Answer 1

Может быть, попытаться немного упростить это с помощью следующего подхода?

// plugins/axios.js
export default {
    install(Vue){   
        Vue.prototype.$myname = "Dean Armada";
    }
}

// plugins/authentication.js
export default {
    install(Vue){   
        Vue.prototype.$name = "Chris Guinto";
    }
}

// main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

new Vue({
  el: '#app',
  render: h => h(App)
})