javascript - Vue Js : How to separate 'methods' , 'data' , 'computed' 等..在单独的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
}