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

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

例如，我有一个computed属性来获取父路由名称-非常简单：

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

我发现我在多个组件中使用这个计算属性。如何将其存储在一个所有组件都可以使用的地方？

您可以使用。最常见的情况是（小心使用）：

this.parent\u route

computed属性现在在所有组件中自动定义

但是你应该避免滥用全局混合。相反，您可以使用（

mixins

选项）在本地应用它们：

---

你可以使用mixin。使用以下内容创建myMixin.js文件：

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

然后，您可以将其导入到vue组件中，如下所示：

从“../myMixin.js”导入{myMixin}//此处是myMixin.js文件的有效路径

并登记：

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

有关mixin的更多信息：

---

谢谢-真不敢相信我在文档中漏掉了这个。使用Vuex会是这种方法的替代方法吗？如果您只谈论数据，那么是的，Vuex就是一种方法。但是，您的

父路径

不能在Vuex中使用，因为它不是数据，您必须将其插入存储，但即使插入，数据也是相对的（每个组件都有一个

父路径

，而不是一个用于所有组件），因此它的用处会小一些。但如果您只想共享数据，那么一定要使用Vuex。

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

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