在插件Vue中使用Mixins

时间:2019-07-07 00:56:15

标签: vue.js vue-component vuex

我有一个要求,在应用程序启动时,我们必须进行Axios调用并获取一些值。这些值应可用于所有应用程序...它们是服务器端的一些元数据,并且应仅获取一次在应用初始化期间... 我通过在插件内部定义一个mixin来实现它,并希望在组件内部获取值。在那种情况下,我应该在哪里进行axios调用?在mixin或插件中?

    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
            }
          }
        })
      }
      )
  }
}

这是正确的做法吗? 还是在应用程序启动时读取某些值并将其获取到全局范围内的最佳方法是什么?

1 个答案:

答案 0 :(得分:1)

我认为,请将其放入已安装的挂钩中。尽管它可以按照您代码中的方式工作,但将mixin的安装包装在then块中有点尴尬。

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
        }
      }
    })
  }
}