mixins混入

作用:用来组合多个组件中共用的逻辑,使得代码的复用更加简化,提高开发效率

使用:配合钩子函数来处理数据:

1.created: 实例创建之后调用,数据初始化或者非响应式的操作。

2.mounted:组件挂载后调用,初始化,或者DOM相关的操作。

3.updated:组件数据变化时调用。

4.beforeDestroy:组件销毁之前,可以做一些清理操作,比如取消订阅,解绑事件。

5.destroyed:组件销毁之后调用,可以做一些清理和资源释放的操作。

这些钩子函数都会通过mixins混入到组件中,以实现相同逻辑的复用。

注意:代码的命名规范,避免数据污染。

例子:

在src下新建mixins文件夹,新建setTokenMixins.js

export default {
    data() {
        return {
            token:null,
        }
    },
    created() {
        let token = this.getQueryString("access_token");
        if(token){
            window.localStorage.setItem("token",token);
        }else{
            token = window.localStorage.getItem("token");
        }
        this.token = token;
        
    },
    methods:{
        getQueryString = (name)=>{
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return r[2];
          return null;
        }
    }
}

组件中导入:

import setTokenMixins from "@/mixins/setTokenMixins.js";
export default {
  mixins: [setTokenMixins],

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值