如何在 vuejs 中全局访问编程类答案

【问题标题】：How can I access programming class globally in vuejs如何在 vuejs 中全局访问编程类
【发布时间】：2021-10-02 02:39:17
【问题描述】：

我想像下面这样声明一个类

class Customer{
 constructor(){
    this.id;       
    this.name;
    this.email;
    this.username;       
    this.password;
   }
}

我想像这样在 vuejs 中的任何组件中创建它的实例

export default {
  name: 'TestCompotent',
  data()
  {
    return{
      MainCutomer: new Customer()      
    }
  },
}

请给我建议，我该怎么做？

【问题讨论】：

没有在每个组件中导入？
只需导入类似于上面导出默认值的类 - import MainCustomer from ./path/Customer.js`

标签： vue.js vue-component vuex vue-router

【解决方案1】：

这是一个WORKING DEMO。

/src/class/Customer.js：

class Customer {
  constructor(id, name, email, username, password) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.username = username;
    this.password = password;
  }
}

export default Customer;

/src/components/HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>TEST PAGE</h3>
    <h5>Main Customer</h5>
    <ul>
      <li>ID: {{ MainCustomer.id }}</li>
      <li>Name: {{ MainCustomer.name }}</li>
      <li>Username: {{ MainCustomer.username }}</li>
      <li>E-mail: {{ MainCustomer.email }}</li>
    </ul>
  </div>
</template>

<script>
import Customer from "./../class/Customer";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    let MainCustomer = new Customer(
      1,
      "Tony",
      "tony.stark@avengers.com",
      "Tony007",
      "myPassword123"
    );
    return {
      MainCustomer: MainCustomer,
    };
  },
};
</script>

【讨论】：