Où mettre vue constante js

Vue est un framework JavaScript frontal très populaire qui fournit un moyen simple et facile de créer des applications Web interactives et dynamiques. Dans le développement de Vue, nous utilisons souvent des constantes pour stocker certaines données pouvant être utilisées dans toute l'application, telles que les adresses API, les clés, les options de configuration, etc. Alors, où devrions-nous mettre du JS constant dans Vue ?

Constant JS peut être placé à de nombreux endroits différents dans VueJS. Voici quelques options courantes :

1. Utiliser JS constant dans les composants Vue

L'utilisation de JS constant dans les composants Vue est la plus simple. En définissant une constante dans un composant, vous créez la constante partagée par ce composant et tous ses sous-composants. Cette approche est idéale pour les situations où les constantes sont utilisées dans un ou quelques composants seulement.

Par exemple, dans l'exemple suivant, nous définissons une constante MESSAGE dans un composant Vue :

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

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

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

2. Utilisation de la constante JS dans une instance globale de Vue

Dans certains cas, vous devrez peut-être créer plusieurs composants dans Vue Une constante est partagé entre les applications. Dans ce cas, vous devez envisager de stocker la constante JS dans un objet d'instance Vue et accéder à l'objet dans le composant qui doit utiliser la constante.

Dans l'exemple suivant, nous définissons une constante API_ENDPOINT comme propriété de l'objet instance Vue :

import Vue from 'vue'

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

Vous pouvez maintenant utiliser la constante $apiEndpoint dans n'importe quel composant Vue comme ceci :

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

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

3. Dans un fichier de constantes séparé Utilisation de constantes en JS

Dans certains cas, vous souhaiterez peut-être ajouter et utiliser une ou plusieurs constantes tout au long de votre application. Dans ce cas, vous devez envisager de stocker la constante JS dans un fichier séparé et d'utiliser les exportations de modules ou les exportations ES6 pour la fournir aux composants qui doivent la consommer.

Dans l'exemple suivant, nous stockons les constantes dans le fichier constants.js et utilisons l'export du module :

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

Vous pouvez maintenant utiliser les constantes définies dans le fichier constants, les importer dans vos composants Vue :

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

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

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

Quoi qu'il en soit, pour Développement Vue, vous pouvez choisir de stocker le JS constant dans chaque composant Vue, dans un objet d'instance Vue ou dans un fichier constant séparé. Lorsque vous choisissez l'option que vous souhaitez, réfléchissez à celle qui permettra de mieux organiser et gérer votre application Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!