如何在 vuejs 中全局访问编程 class

Question

我想声明一个 class 如下所示

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

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

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

请指教，我该怎么做？

Answer 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>

如何在 vuejs 中全局访问编程 class

How can I access programming class globally in vuejs

vue.js

vue-router

vue-component

vuex