全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个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全局混入混入

评论

暂无评论数据

暂无评论数据

目录