Vue Mixin - Handle Data Properties

Posted 2023-02-16

【中文标题】Vue Mixin - Handle Data Properties

【英文标题】：

【发布时间】：2021-05-22 02:28:57

【问题描述】：

我正在尝试将 mixins 用于我的几个 Vue SFC 中使用的一些可重用方法。 现在，我担心的是 mixins 是如何处理数据属性的？我发现使用 mixin 时很容易出错（例如，在主组件中重命名数据属性并且在 mixin 中访问它时）。处理这种情况的最佳方法是什么？

// main.vue
<template>
   <div>
       Input Name:
      <input v-model="mainComponentValue" placeholder="edit me">
       <br/><br/>
        welcomeMessage  <br/>
       Member ID:  getMemberIdNum()      
       <br/><br/>
        checkMemberOftheMonth() 
       <br/><br/><br/>
       someMainComponentMethod() 
   </div>
</template>

<script>
import mixin from ‘./mixin.js’
export default 
   mixins: [mixin],
   data () 
      return 
         title: 'Component',
         mainComponentValue: 'John'
      
   ,
   methods: 
      someMainComponentMethod () 
         return 'This is a computed property from the mixin: ' + this.memberName
      
   

</script>

然后在我的 mixin 上：

// mixin.js

export default 
   data () 
      return 
         mixinSampleValue: 'Hello there'
      
   ,
   computed: 
     welcomeMessage () 
         return this.mixinSampleValue + ', ' + this.mainComponentValue.toUpperCase() + '!'
     ,
     memberName () 
         return this.mainComponentValue.toLowerCase()
     
   ,
   methods: 
     getMemberIdNum () 
       switch (this.memberName) 
         case 'john':
           return '0001'
         case 'roger':
           return '0002'
         default:
           return '0003'
       
     ,
      checkMemberOftheMonth () 
         // use main component's data
         if (this.memberName === 'john') 
             return 'Congratulations, you are our member of the month!'
         
      
   

如您所见，main.vue 数据属性在 mixin 中使用，反之亦然（以及计算属性和方法）。所以我担心如果我更改数据属性名称（比如说 mainComponentValue 到 @987654326 @) 在main.vue 或任何其他使用 mixin 的 vue 组件，那么它会弄乱我的 mixin。反之亦然，当我从 mixin 更改计算属性时，main.vue 将被搞砸。

我有什么方法可以为这种情况添加某些检查？

作为参考，这里有一个示例 CodePen： https://codepen.io/keechan/pen/eYBRQGM

谢谢！

【问题讨论】：

Mixins 旨在定义常见的功能，您可以在其中定义基于它们收到的参数工作的计算或方法。此外，由于这些功能很常见，因此它们不应修改使用它们的 vue 文件的任何数据属性

【参考方案1】：

我们不再使用 mixins（几乎）。我们的开发团队也有同样的问题，即在组件内部，mixin 提供了什么并不明显。

相反，我们使用带有 scoped slots 的完整或无渲染组件，或者我们只是从 lib 目录中导入一些我们希望在多个 vue 组件之间共享的函数。

另一种选择是Composition API，另见：https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/