在 Vue 组件中导入 Helper 类答案

【问题标题】：Import Helper Class in Vue Component在 Vue 组件中导入 Helper 类
【发布时间】：2017-01-27 13:39:47
【问题描述】：

我想导入一个辅助类，而不是将逻辑内联到我的组件中。我收到以下错误：

http://eslint.org/docs/rules/no-unused-vars  'NavbarService' is defined but never used

/services/NavbarService.js

class NavbarService {
  constructor (init) {
    this.init = init;
  }

  static applications () {
    return [
      { name: 'Administration' },
      { name: 'Standard' }
    ];
  }

  static views () {
    return [
      { name: 'Providers', path: '/providers' },
      { name: 'Authorities', path: '/authorities' },
      { name: 'Services', path: '/services' },
      { name: 'Codes', path: '/codes' }
    ];
  }
}

/components/Navbar.vue

import NavbarService from '../services/NavbarService.js';

export default {
  data () {
    return {
      versionIsVisible: false,
      version: '2.0.0',
      applications: NavbarService.applications(),
      views: NavbarService.views()
    };
  },

  methods: {
    showApplications: function () {
      this.applications = NavbarService.applications();
      this.views = [];

      return;
    }
  }
};

【问题讨论】：

有没有实例化过这个类，或者它只是一个辅助函数的容器？
纯粹是一个容器。
我想你不想上课。你能把它变成一个普通的对象吗？
那行得通。谢谢。

标签： javascript vue.js vue-component

【解决方案1】：

按照 Roy J 的建议，我将 /services/NavbarService.js 更改为：

export default {
  applications: function () {
    return [
      { name: 'Administration' },
      { name: 'Standard' }
    ];
  },

  views: function () {
    return [
      { name: 'Providers', path: '/providers' },
      { name: 'Authorities', path: '/authorities' },
      { name: 'Services', path: '/services' },
      { name: 'Codes', path: '/codes' }
    ];
  }
};

【讨论】：