木灵鱼儿

木灵鱼儿

阅读：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这些对象，所以也不需要指定运行的环境

文章分类 nuxt
文章标签 vuenuxtmixins全局混入混入
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 2175

版权申明

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

one
two
three

关于作者

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

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目

目录树