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

Question

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

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

我是这么做的// 一个页面或一个组件分了四个文件&nbsp;--page+ index.vue+ page.html+ page.js+ page.scss// index.vue<template src="./page.html"></template><script src="./page.js"></script><style scoped&nbsp; src="./page.scss"></style>// page.html<div></div>// page.jsexport default {&nbsp; name: 'Page',}我是不喜欢一个文件太多行代码，所以这样分。如果一个组件代码量不多的话 都写一个文件里面就行了。&nbsp;另外养成良好的编码习惯及命名规范。代码看着就舒服了。

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的话 随意当然如果能分成子组件是最好