[vue2.x]MIXINS的使用

因为现在已经有了vue3.x版本，所以在之后的记录中会和版本有关的知识点会明确指出版本的区别，这里记录一下对mixin的使用，这里以下 的vue指的是使用版本是vue2.x

Mixins使用场景

在vue的开发中，因为vue是有生命周期的，那如果我们希望在不同vue文件的相同的生命周期中做相同的事情，如果直接在每个文件中都写相同的代码，肯定是可以实现的，但这个肯定不是最佳实践，在vue中是通过mixins实现的

使用mixins可以减少重复代码的出现,便于抽取公共函数

Mixins的应用

mixins公共文件

src/mixins/index.js

export const mixins={
    components:{

    },
    created(){
        //console.log() hook
    },
    data(){

    },
    computed:{

    },
    methods:{
    }
}

我们可以在指定的钩子函数中写一些通用的方法，或者数据中设定通用的字段名称，但是需要注意设置的data中的值的作用阈是当前的vue文件，全局的值需要特殊的设定

mixins的导入与使用

在vue2.x的.vue文件中引入mixins文件

import {mixins} from "../../mixins/index"

    { 
	......
       mixins:[mixins],
 	   data(){
 	   }，
 	   methods:{
       }
}

mixins中的内容会分别插入对应的方法中,也就是mixins中 created中的方法会自动插入.vue文件的 created方法中，mixins中data中的数据也会自动插入.vue文件的data中,并且当混入对象和组件本身含有重复选项时，这些选项将以合适的策略进行“合并”

合并策略

mixins中的内容会分别插入对应vue文件中,也就是mixins中，那么如果存在同名的字段、方法如何合并？

• 数据对象data在内部会进行递归合并，并在发生冲突时以组件（vue文件）数据优先，也就是就近原则
• 同名钩子函数（生命周期函数）中的内容将合并进一个数组里，以便它们都能被调用。另外，mixins文件的钩子函数会在组件自身钩子函数之前被调用
• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对，也即遵循就近原则

这个目前来看就是生命周期中的内容会合并成数组，全部执行，并且mixins文件内容先执行，其它的都是如果冲突，采用就近原则

mixins的全局设置

socket实例

export const mixins = {
  created() {
    this.initWebSocket();//进入该生命周期执行初始化socket
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      this.websock = new WebSocket( window.wsURI);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      //建立
      // let actions = { 'test': '12345' }
      // this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror(e) {
      //连接建立失败重连
      console.log("websocketonerror:try init websocket again");
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log("websocketonmessage: valid result:");
      const res = JSON.parse(e.data);
      if (res.status== 200) {
        this.$model.success({ title: "File upload compliance" });
      } else if (res.status== 500) {
        this.$model.error({
          title: res.data.title,
          content: res.data.detailMessage,
        });
      } else {
        this.$model.error({ title: "Server error, please try later" });
      }
      this.uploadData = {
        file: "",
        comment: "",
        ruleType: "",
      };
      this.refresh();
    },
    websocketsend(Data) {
      //数据发送
      // this.websock.send(Data)
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    action(param) {
      console.log("action");
      const temp = JSON.parse(param);
      const statusUrl = "/xxxxxx/" + temp.type;
      this.$http.post(statusUrl).then((res) => {
          if (res.status!= 200) {
            //---------------------
          }
          this.refresh();
        })
    },
  },
};

这是一个关于建立socket链接的抽象

Mixins的使用缺陷

正如之前介绍的，在Mixins的使用过程中，因为需要合并，那么就会遇到下列问题

• 重名问题
• 依赖问题

虽然有合并策略可以避免部分问题，但是有些复杂问题并不好避免，因此在vue3.x已经不推荐使用该方式了

Vue3.x中的实现方式

因为使用Mixins的目的，是为了能够抽取公共的部分，减少代码的重复，而vue3.x的组合式Api（setup）可以直接引入公共文件，因此也就不需要Mixins了