Di mana untuk meletakkan vue constant js

Vue ialah rangka kerja JavaScript bahagian hadapan yang sangat popular yang menyediakan cara mudah dan mudah untuk membina aplikasi web interaktif dan dinamik. Dalam pembangunan Vue, kami sering menggunakan pemalar untuk menyimpan beberapa data yang boleh digunakan sepanjang aplikasi, seperti alamat API, kunci, pilihan konfigurasi, dsb. Jadi, di manakah kita harus meletakkan JS berterusan dalam Vue?

JS Malar boleh diletakkan di banyak tempat berbeza dalam VueJS. Berikut ialah beberapa pilihan yang biasa digunakan:

1. Menggunakan JS tetap dalam komponen Vue

Menggunakan JS tetap dalam komponen Vue adalah paling mudah. Dengan mentakrifkan pemalar dalam komponen, anda menjadikan pemalar dikongsi oleh komponen itu dan semua subkomponennya. Pendekatan ini sesuai untuk situasi di mana pemalar digunakan hanya dalam satu atau beberapa komponen.

Sebagai contoh, dalam contoh berikut, kami menetapkan pemalar MESEJ dalam komponen Vue:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      message: MESSAGE
    }
  }
}

const MESSAGE = 'Hello, Vue!'
</script>

2. Menggunakan JS pemalar dalam contoh Vue global

Dalam sesetengah kes, anda mungkin perlu mempunyai berbilang komponen berkongsi pemalar dalam aplikasi Vue anda. Dalam kes ini, anda harus mempertimbangkan untuk menyimpan JS pemalar dalam objek contoh Vue dan akses objek dalam komponen yang perlu menggunakan pemalar.

Dalam contoh berikut, kami menetapkan pemalar API_ENDPOINT sebagai sifat objek contoh Vue:

import Vue from 'vue'

Vue.prototype.$apiEndpoint = 'https://api.example.com'

Anda kini boleh menggunakan pemalar $apiEndpoint dalam mana-mana komponen Vue seperti berikut:

<template>
  <div>
    <h1>{{ apiEndpoint }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  computed: {
    apiEndpoint () {
      return this.$root.$apiEndpoint
    }
  }
}
</script>

3. Menggunakan pemalar JS dalam fail pemalar yang berasingan

Dalam sesetengah kes, anda mungkin mahu menambah dan menggunakan satu atau lebih pemalar sepanjang aplikasi anda . Dalam kes ini, anda harus mempertimbangkan untuk menyimpan JS malar dalam fail berasingan dan menggunakan eksport modul atau eksport ES6 untuk memberikannya kepada komponen yang perlu menggunakannya.

Dalam contoh berikut, kami menyimpan pemalar dalam fail constants.js dan menggunakan eksport modul:

export const API_ENDPOINT = 'https://api.example.com'
export const APP_NAME = 'My Awesome App'

Anda kini boleh menggunakan pemalar yang ditakrifkan dalam fail pemalar, dalam komponen Vue anda Import mereka dalam:

<template>
  <div>
    <h1>{{ appName }}</h1>
  </div>
</template>

<script>
import { APP_NAME } from './constants'

export default {
  name: 'MyComponent',
  data () {
    return {
      appName: APP_NAME
    }
  }
}
</script>

Ringkasnya, untuk pembangunan Vue, anda boleh memilih untuk menyimpan JS tetap dalam setiap komponen Vue, dalam objek contoh Vue atau dalam fail pemalar yang berasingan. Apabila memilih pilihan yang anda mahu, pertimbangkan pilihan yang akan mengatur dan mengurus aplikasi Vue anda dengan lebih baik.

Atas ialah kandungan terperinci Di mana untuk meletakkan vue constant js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!