木灵鱼儿

木灵鱼儿

阅读:2175

最后更新:2021/05/07/ 17:51:32

nuxt mixins全局混入

全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个js文件里面,那是非常混乱的,所以我采用模块化的写法,其实就是导入导出而已,一种方式。

具体用法和全局过滤器一样,创建插件,激活插件。

在plugins目录下创建mixins文件夹,mixins里面创建一个index.js作为入口文件,然后再创建一个modules目录,用来存放mixin混入的方法。

假设我们在modules/test.js下写了一个混入

export default {
  methods: {
    test(){
      console.log("我是一个全局混入方法");
    }
  }
}

混入模块test写好后,我们在index.js中引入

index.js

import Vue from "vue";
import test from "./modules/test";

const mixinsData = { test };

Object.keys(mixinsData).forEach(key => {
  //每当向应用程序添加全局mixin时,都应使用一个标志以避免多次注册它
  if (!Vue[`__my_${key}__`]) {
    Vue[`__my_${key}__`] = true
    Vue.mixin(mixinsData[key]);
  }
});

由于混入的东西很危险,在nuxt中可能会触发多次混入,混入本身是一个对象(甚至是内容),引用类型往往很容易造成内存泄露,所以,我们给Vue对象增加一个判断标识,如果已经为true表示混入过了,就不再混入了。

nuxt.config.js

export default {
  plugins:[
    '@/plugins/mixins',//全局混入
  ]
}

混入也基本上用不到window这些对象,所以也不需要指定运行的环境

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2175

相关文章

目录树