CODEWITHSUNDEEP
vue.jsvuejs2vue-mixin
kzaiwo
kzaiwo

Reputation: 1768

Vue Mixin - Handle Data Properties

I am trying to use mixins for some reusable methods being used in several of my Vue SFCs. Now, what I am worried about is how does mixins handle data properties? I find that it is too easy to make errors when using mixins (e.g. when renaming the data properties in the main component and it is being accessed in the mixin). What is the best way to handle such scenario?

// 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>

Then on my 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!'
         }
      }
   }
}

As you can see, main.vue data properties are used in the mixin and vice versa (and computed properties and methods).. So I worry that if I change the data property name (let's say mainComponentValue to name) at main.vue or any other vue component that uses the mixin, then it will mess my mixin up. And vice versa when I change a computed property from the mixin, then main.vue will be messed up.

Any way I can add certain checkings for cases like this?

For reference, here is a sample CodePen: https://codepen.io/keechan/pen/eYBRQGM

Thanks!

Upvotes: 0

Views: 2003

Answers (1)

CimChd
CimChd

Reputation: 241

We do not use mixins anymore (almost). We had the same issues in our dev team, that it is not obvious inside a component what the mixin provides.

Instead we use full or renderless components with scoped slots or we simply import some functions from a lib directory that we want to share across several vue components.

Another alternative is the Composition API, see also: https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/

Upvotes: 1

Related Questions