Vue Js：如何在单独的js文件中分离“方法”，“数据”，“计算”等。

Question

是否有可能在单独的.js文件中编写方法，数据，计算等。然后将它们导入component.vue文件中？

我不会将所有js逻辑都放在一个.vue组件中。

对于每个组件，我都希望以这种方式组织代码：

myComponent/
      component.vue
      methods.js
      data.js
      computed.js
      etc..

然后在component.vue中：

methods: ()=> from './methods.js'

我只是尝试了模块导出，但没有用

Answer 1

只需导出对象和函数，然后将它们导入组件中即可。

// methods.js
export default {
  myMethod () {
    console.log('a');
  }
}

// data.js
export default function () {
  return {
  }
}

// computed.js
export default {
  myVariable() {
    return '';
  }
}

// component.vue
import methods from './methods';
import data from './data';
import computed from './computed';

export default {
  ...methods,
  ...data,
  ...computed
}