在Vue.js中导入服务

Question

I have a utils service I wish to use in my Vue component:

  import utils from './utils';

  export default {
    name: 'grid',
    props: {
      'gridInit': { type: Object, require: true },
      'gridDataInit' : { type: Array, required: true }
    },
    data: function() {
      return {
        gridData: [],
      }
    },
    created: function(){
       this.gridData = utils.transformRawData(this.gridDataInit, this.gridInit.check);
    },

  }

However, I receive:

[Vue warn]: Error in created hook: "ReferenceError: utils is not defined"

How can I solve the issue? The structuring of my project with utils services is very important to me.

Answer 1

This code says that you have declared utils as you imported. So that was the declaration part. But what about definition? In definition there is main play happening around for which that declared utils is used in code. So I think it creates warning that it is not defined. You should use it via registering like Vue.use(componentname/pluginname) . This all should be done in index.js and then should be used in components

Anyhow hope this clears for you!