Vue用mixin合并重复代码的实现

程序员文章站 2022-04-12 19:30:03

在我们做项目的时候，往往有很多代码逻辑是通用的，比如说，业务逻辑类型的判断，时间戳的转换，url中字符串的截取等等，这些函数如果在每个需要的页面中都加入的话，不仅加重了当前页面的逻辑复杂程度，还会占用...

在我们做项目的时候，往往有很多代码逻辑是通用的，比如说，业务逻辑类型的判断，时间戳的转换，url中字符串的截取等等，这些函数如果在每个需要的页面中都加入的话，不仅加重了当前页面的逻辑复杂程度，还会占用大量原本可以省略的内存。因此，将这些代码整理出来统一管理是很有必要的，在vue项目中，我们都知道模块化和组件化，但vue的框架中还有一个很好用的知识点，就是mixin。

mixin不仅可以存放data、watch、methods、computed等,还可以存放vue的生命周期，是不是很神奇呢？

通过点击按钮“点击我”，实现“难受”和“极好的”相互切换，首先上效果图：

初始页面：

Vue用mixin合并重复代码的实现

子组件1和子组件2都可以通过“点击我”，实现状态改变，通过触发子组件1的按钮1次，触发子组件2的按钮2次，效果如下：

Vue用mixin合并重复代码的实现

项目的核心结构如下：

Vue用mixin合并重复代码的实现

其中，新增了mixin文件夹，新增了child1.vue和child2.vue,更改helloworld.vue为father.vue，因为本人有代码洁癖，觉得vuerouter默认的hash模式，会使得前端路由有些难看，所以改成了history模式，项目更改的文件代码如下：

child1.vue

<template>
  <div class="child1">
    <h1>我是子组件1</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitchange">点击我</button>
  </div>
</template>
 
<script>
import { happy } from '../mixin/showhappy'
export default {
  name: "child1",
  mixins: [happy]
}
</script>

child2.vue

<template>
  <div class="child2">
    <h1>我是子组件2</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitchange">点击我</button>
  </div>
</template>
 
<script>
import { happy } from '../mixin/showhappy'
export default {
  name: "child2",
  mixins: [happy]
}
</script>

father.vue

<template>
 <div class="father">
  <h1>我是父组件</h1>
  <child1-component />
  <child2-component />
 </div>
</template>
 
<script>
import child1component from './child1'
import child2component from './child2'
export default {
 name: 'father',
 data () {
  return {
   msg: 'welcome to your vue.js app'
  }
 },
 components:{
  child1component,
  child2component
 }
}
</script>

mixin/showhappy.js

/*这里是专门用来进行mixin测试的(通过点击按钮会相应的改变对应状态)*/
export const happy = {
  data(){
    return{
      isrealhappy:true,
      status: '',
      sad: '难受',
      comfort: '舒服'
    }
  },
  methods:{
    submitchange(){
      if(this.isrealhappy){
        this.isrealhappy = !this.isrealhappy
        this.status = this.comfort
      }else{
        this.isrealhappy = !this.isrealhappy
        this.status = this.sad
      }
    }
  }
}

router/index.js

import vue from 'vue'
import router from 'vue-router'
import father from '@/components/father'
 
vue.use(router)
 
const routes = [
 {
  path: '/',
  name: 'father',
  component: father
 }
]
const routers = new router({
 mode: 'history',
 routes
})
export default routers

那么，代码贴了这么多，mixin究竟有啥用呢？那就是代码复用

Vue用mixin合并重复代码的实现