What is a mixin

First of all, when it comes to the word mixin, the concept of mixin is not unique to Vue. A similar mixin concept is found in the CSS preprocessor less or stylus or SCSS. It’s just that the blending in the CSS preprocessor is for style reuse. Mixins in VUE are used to realize the reuse of functions.

See my previous post: juejin.cn/post/695682…

How do you officially define a mixin

The document is defined as follows

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses a mixin object, all the options for the mixin object are “mixed” into the component’s own options.

At first glance, it’s not very grounded, so let’s translate it in plain English

Translation in vernacular

  • Mixins provide a very flexible approach

    Mixing features is very confusing

  • To distribute reusable functionality in the Vue component.

    Use mixin functionality that can be reused in.vue components. What reuse features can you think of? For example, do the background management system often need to use the paging function, such as a lot of places in the project to use the pop-up Message Message prompt function. There are quite a few, and this article uses paging as an example

  • A mixin object can contain any component option.

    Mix is an object? Wow, the fabled idea of OOP, mixed with a bit more inherited taste. Mix contains any component options? Component options are data, computed, Watch, Methods, and various lifecycle hooks, which means that you can define these component options in the mix just as you would define them in a component to be “mixed in.

  • When a component uses a mixin object, all the options for the mixin object are “mixed” into the component’s own options

    To use a ‘thing’ in vue, the usual routine is to define –> introduce –> register –> use. Since you’re using a blend in a.vue, when you introduce it, you have something in the blend.

Actual usage steps (Paging components use blending)

Let’s take a look at the final renderings

Let’s say we have two routing pages in our project that both use the paging component. The paging component is usually paired with a table. For simplicity, we will not use the table here. We’re going to do this with mixins

First, create a new project

  • App.vue file to place the corresponding route navigation and view structure 
    / / App. Vue file<template>
  <div id="app">
    <div class="top">
      <router-link to="/">Routing Page 1</router-link>
      <router-link to="/about">Routing Page 2</router-link>
    </div>
    <div class="bottom">
      <router-view></router-view>
    </div>
  </div>
</template>
Copy the code
  • Let’s define it this way in the route 
    import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{path: "/".component: resolve= > require(['.. /views/home.vue'], resolve),
        },
        {
            path: "/about".component: resolve= > require(['.. /views/about.vue'], resolve),
        },
    ]
})
export default router
Copy the code
  • Home. vue and about.vue use the page component of ele. me UI (the about.vue file is not placed, the structure is basically the same). 
    <template>
  <div>
    <div class="block">
      <span class="demonstration">Mix is used in page 11111</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="paging.pageIndex"
        :page-size="paging.pageSize"
        :total="paging.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "home".data() {
    return {
      paging: {
        pageIndex: 1.pageSize: 10.total: 100,}}; },methods: {
    handleSizeChange(val) {
      this.paging.pageIndex = 1;
      this.paging.pageSize = val;
    },
    handleCurrentChange(val) {
      this.paging.pageIndex = val; ,}}};</script>
Copy the code

In this way, the paging effect of both routing pages is achieved. We just don’t have mixins yet. In this case, because both home.vue and about.vue have paging capabilities, To use pagination, you need to define variables and methods such as pageIndex, pageSize, total, handleCurrentChange, and handleSizeChange. These variables and methods are common reusable code, and because they are likely to be used in many places, we can put them in a mixed file and mix them in wherever we need them.

Step 2 (Define a mixin file and expose it)

Step 3 (Introduce mixed registration and use mixed)

  • First, delete the paging variables in data and the paging methods in methods


    Of course, deleting them will cause an error, because the paging component needs these variables and methods, so we’ll use the mixed variables and methods

  • Introduce the mix and register it for use 
    <template>
  <div>
    <div class="block">
      <span class="demonstration">Mix is used in page 11111</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="paging.pageIndex"
        :page-size="paging.pageSize"
        :total="paging.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
// Introduce mixing
import mixin from '.. /mixin/index'
export default {
  name: "home".mixins: [mixin] // Register and use
};
</script>
Copy the code

    Do the same with another about.vue file, and you’ll get the desired functionality. There is no space to elaborate

Supplement 1 (see the specific mix introduced)

If you want to print the vue example, you can see the mixin code that has been mounted to it, as follows:

<script>
import mixin from '.. /mixin/index' // Introduce mixing
export default {
  name: "home".mixins: [mixin], // Register and use
  mounted() {
    console.log('Print the vue example this, view the mix'.this);// Look here, look here, look here}}; </script>Copy the code

The print result is as follows:

Obviously, the variables and methods in the mix are already mounted to the vue component instance. Now that they are mounted to the example, this means that they can be used in the HTML code in the Template, so using the mix does make our code more elegant

Supplement 2 (What if mixin code conflicts with component code)

  • First, don’t repeat

    The code defined in the mix should not be the same as the code in the component

  • Second, take what’s in the component

    In short, if it’s not in the component, it’s in the mix, bring it in; It’s in the component, it’s in the mix, it’s not in the mix, it’s in the component

Supplement 3 (global mixed, use with caution)

In the above code case, we used local mixins, which is actually quite convenient to introduce mixing wherever it is needed. Using a global mashup eliminates the registration step, but the variables and methods defined in the global mashup are mounted on each component, which is not a good idea. After all, the official also reminds us that the use of global interfuse must be particularly careful

conclusion

mixin VS vuex

You can also manage state with VUex, the difference between mixing and vuex is that as soon as the data in VUex changes, all the related dependencies in VUex change, but with mixins, this happens. After all, Vuex is public, mixin is independent