Vue.js - 如何避免代码重复答案

【问题标题】：Vue.js - How to Avoid Code DuplicationVue.js - 如何避免代码重复
【发布时间】：2018-08-16 04:30:16
【问题描述】：

在跨多个组件使用计算属性之类的东西时，如何避免代码重复？

一个例子是我有一个计算属性来获取父路由名称 - 这很简单：

computed: {
  parent_route () {
    return this.$route.matched[0].name
  }
}

我发现我在多个组件中使用了这个计算属性。我怎样才能将它存储在一个我的所有组件都可以使用的地方？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以使用Mixins。对于最一般的情况，有Global Mixin（小心使用）：

Vue.mixin({
    computed: {
      parent_route () {
        return this.$route.matched[0].name
      }
    }
})

this.parent_route 计算属性现在在所有组件中自动定义。

但您应该避免滥用全局混入。相反，您可以使用 Option Merging（mixins 选项）在本地应用它们：

var mixin = {
    computed: {
      parent_route () {
        return this.$route.matched[0].name
      }
    }
};

new Vue({
  mixins: [mixin],
  data: function () {},
  created: function () {
    console.log(this.parent_route) // should be ok
  }
})

【讨论】：

谢谢 - 不敢相信我在文档中错过了这个。使用 Vuex 会替代这种方法吗？
如果您只谈论数据，那么是的，Vuex 就是这样。但是，您的 parent_route 不能在 Vuex 中使用，因为它不是数据，您必须将其插入到存储中，但即使您这样做了，数据也是相对的（每个组件都有一个 @ 987654329@，不是全部），所以它会变得不那么有用。但如果你只想分享数据，那绝对是 Vuex。

【解决方案2】：

您可以使用混合。创建 myMixin.js 文件：

export const myMixin = {
 computed: {
  parent_route () {
    return this.$route.matched[0].name
  }
 }
}

然后你可以像这样在你的 vue 组件中导入它：

import {myMixin} from '../myMixin.js' //myMixin.js 文件的有效路径

并注册：

...
data {...},
mixins: [myMixin],
methods: {...}
...

更多关于混入的信息： https://vuejs.org/v2/guide/mixins.html

【讨论】：