vue页面methods里面方法太多，能否抽出一个方法文件？

Question

我一个.vue文件里面的methods有10多个方法，这个页面看着很乱。

是因为我组件化不够彻底的原因么；

有什么办法能把文件变的简洁一些么

Answer 1

1.细分组件
2.提取公共方法，使用的时候import进来

Answer 2

我觉得还是抽出来一个minxin比较稳妥。?

Answer 3

我是这么做的

// 一个页面或一个组件分了四个文件 
--page
+ index.vue
+ page.html
+ page.js
+ page.scss

// index.vue
<template src="./page.html"></template>
<script src="./page.js"></script>
<style scoped lang="scss"  src="./page.scss"></style>

// page.html
<div></div>

// page.js
export default {
  name: 'Page',
}

我是不喜欢一个文件太多行代码，所以这样分。
如果一个组件代码量不多的话 都写一个文件里面就行了。
另外养成良好的编码习惯及命名规范。代码看着就舒服了。

Answer 4

可以写一个单独的js文件，放入main，变成公共文件，直插 methods

Answer 5

深有同感，我有个vue文件，600多行代码了.....
我感觉还是要尽量细分组件

Answer 6

写一个公共的js，然后引入合适点吧

Answer 7

和上面600行的同学一样深有同感

目前很多页面洋洋洒洒都是几百行，如果第二天再来看，头都晕了

尝试或的的做法是
1、使用 Mixin，然后再引入，很有效的减少了代码
但很坑的是如果别人来写，根本不知道你的引用的方法在哪个mixin文件中，一个一个找

2、都尽量用await，这样看起来代码都是平级的

3、分离出不需要this的函数
比如某个函数只有console.log(123), 那么就可以把这个单独出来放到页面最底部，或者另一个func.js文件中，然后再import进来
好处就是，对于第一种方式，我可以知道哪个函数在哪个文件
坏处就是，你会分成很多子函数
当然，如果你不建议使用.call或者.apply的话 随意

当然如果能分成子组件是最好

Answer 8

一个极为复杂的组件，代码量1200多行，代码太长翻阅很费劲，但是拆分成mixins, 或者是放到外部文件import进来，也有问题就是过于粒度，其他人找的时候很麻烦。时间长了有时候自己都忘了

Answer 9

100多个方法是需要反思一下了。

最好的方式是抽离成minxins

minxins的this是指向调用这个minxins的vue实例