Vuejs如何在单个组件中使用重复方法答案

【问题标题】：Vuejs how to use repeated methods in single componentsVuejs如何在单个组件中使用重复方法
【发布时间】：2020-04-27 23:09:38
【问题描述】：

如何在不为到达组件重写相同方法的情况下在不同组件中使用相同的方法。我查看了 mixins，但文档说“谨慎使用全局 mixins”。所以我想知道这种方法是否有更理想的方法。与全局计算相同。

<template>
    <div class="wrapper">
    ...
    <a href="#" @click.prevent="goToPage('page')">Link on many templates</a>
    ...
    </div>
</template>

<script>
export default {
   data() {
     return {}
   },
   methods: {
     goToPage(page) {
        return this.$store.commit('page/push', {page:page});
     }
   }
}
</script>

谢谢

【问题讨论】：

mixins 是你在使用 vue 2 时应该使用的。它有一些缺点，但并不意味着它不能使用。或者你可以等待 vue 3 正式发布。
@Psidom 您能否详细说明 Vue 3 以及它带来的在这种情况下可能会有所帮助的好处？我找不到其他官方文档。谢谢！
您可以在此处阅读vue composition-api，更具体地说是logic extraction and reuse。 TLDR：mixin 存在属性资源清晰和命名空间冲突等问题。这些问题将通过 vue 3 的 composition api 解决。

标签： vue.js vuex

【解决方案1】：

全局混合不是唯一的混合类型。见https://vuejs.org/v2/guide/mixins.html

如果您想为每个组件添加方法或计算属性，那么您将使用全局 mixin。这将影响所有组件，包括来自第三方库的组件。选择名称时需要小心，以确保不会与其他任何内容发生冲突。使用全局 mixin 也会带来很小的性能开销。例如，Vuex 使用全局 mixin 来确保所有组件上都存在 $store 属性。

如果您只需要将方法/属性添加到几个组件，那么使用普通的 mixin 会好得多。通常，它会有自己的文件，看起来像这样：

// my-mixin.js
export default {
  methods: {
    goToPage(page) {
      return this.$store.commit('page/push', {page:page});
    }
  }
}

然后在您的 .vue 文件中：

<script>
import myMixin from 'my-mixin'

export default {
  mixins: [myMixin],
  // ... all the other options
}
</script>

鉴于问题中的示例似乎是导航链接，使用 mixin 的替代方法可能是引入合适的组件来处理这些链接。您只需使用链接组件，而不是在组件之间共享代码。这将取决于该方法是否具有超出这些链接的用途。

还有其他选择，例如使用 Vue.prototype 在组件之间全局共享内容，但问题中给出的示例似乎不太合适。

我还要注意 Vue 3 通过组合 API 引入了一些新的 mixins 替代方案。但是，使用组合实际上会改善您的特定用例并不是很明显。 Vue 3 也仍处于测试阶段。

【讨论】：