Question

通过在两个位置导入类，我可以创建两个不同的实例吗？

* content of "MyClass.js"

class MyClass {

  constructor() {}

  isAuthenticated() {}
}

const cls = new MyClass();

export default cls;
--------------------------------
* content of "router.js"

import auth from "./MyClass";

Vue.use(Router)
--------------------------------
content of "./plugins/MyPlugin.js"

import clsInstance from "./MyClass";


export default {
  install(Vue) {
    Vue.prototype.$auth = clsInstance;
  }
}
--------------------------------
* content of main.js

import myFirstPlugin from "./plugins/MyPlugin.js";

Vue.use(myFirstPlugin);


router.beforeEach((to, from, next) => {

    if( auth.isAuthenticated() ){}

}
new Vue({
    router
})
--------------------------------
* content of someComponent.vue

  methods: {
    logOut() {
        this.$auth.isAuthenticated()

     }
  }

是“ main.js”中“ router.beforeEach”内部的“ auth.isAuthenticated” 相同与 this。$ auth.isAuthenticated（）在“ someComponent.vue”的“ logOut”中还是实际上创建了两个不同的“ MyClass”实例？

Answer 1

import与require几乎相同。 MyClass.js中的代码将只运行一次，从而创建MyClass的单个实例。对import的两次调用都将在同一实例中进行。

您可以通过以下方式确认这一点：

在MyClass.js中放置一些控制台日志。请注意，无论您导入多少次，它都只会运行一次。
向您在一个文件中导入的对象添加属性（例如，设置auth.myFlag = true），然后检查另一个文件中是否也存在该标志（例如，选中clsInstance.myFlag）。这不是完全确定的，但是是验证它是同一对象而不是两个单独的实例的不错的方法。

如果要使用单独的实例，则可能需要尝试导出类本身，以便每个文件都可以创建自己的实例。

从您发布的代码中，我相信auth.isAuthenticated()和this.$auth.isAuthenticated()在同一个对象上调用相同的方法，并且（取决于isAuthenticated的作用）应该给出相同的结果。

Vue2-导入类，访问和实例化

1 个答案: