Storan data malar tidak berubah dalam vue

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri mudah untuk membina aplikasi web interaktif. Dalam aplikasi Vue, kadangkala kita perlu menyimpan beberapa data pemalar yang tidak berubah, seperti alamat API, nilai penghitungan, dsb. Dalam artikel ini, kami akan memperkenalkan beberapa kaedah biasa untuk menyimpan data pemalar tidak berubah dalam Vue.

1. Menggunakan pembolehubah global Vue

Vue.js menyediakan pembolehubah global Vue yang boleh diakses dalam aplikasi. Kita boleh menggunakan kaedah $set untuk menentukan pemalar global.

Vue.prototype.$API_URL = 'http://example.com/api';

Dalam kod di atas, kami menambahkan atribut $API_URL pada prototaip Vue dan menetapkannya kepada nilai pemalar. Dengan cara ini, kita boleh mengakses pemalar melalui ini.$API_URL dalam mana-mana komponen Vue.

Walau bagaimanapun, perlu diingat bahawa walaupun kaedah ini sangat mudah, pembolehubah global mungkin diubah suai secara tidak sengaja oleh pembangun lain, menyebabkan ralat aplikasi. Di samping itu, kaedah ini tidak sesuai untuk senario di mana nilai malar perlu dijana secara dinamik.

2. Menggunakan Vuex

Vuex ialah alat pengurusan keadaan rasmi Vue.js Ia boleh digunakan untuk menyimpan dan mengurus pelbagai data keadaan dalam aplikasi, termasuk pemalar tidak berubah . Kita boleh menggunakan Vuex untuk menyimpan nilai tetap dan mengaksesnya dalam komponen Vue.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    API_URL: 'http://example.com/api'
  }
});

export default store;

Dalam kod di atas, kami mencipta contoh Vuex bernama kedai dan mentakrifkan nilai API_URL malar dalam atribut keadaan. Nilai ini boleh diakses dalam komponen Vue melalui ini.$store.state.API_URL.

Berbanding dengan pembolehubah global, menggunakan Vuex untuk pengurusan mempunyai kebolehselenggaraan dan organisasi yang lebih tinggi. Kita boleh dengan mudah memanggil keadaan Vuex dalam semua komponen tanpa perlu berurusan secara manual dengan skop pembolehubah global.

3. Menggunakan fail malar

Dalam Vue, kami boleh menggunakan fail malar untuk menyimpan data malar aplikasi. Fail malar ialah fail JavaScript yang mengandungi semua data pemalar tidak berubah yang digunakan dalam aplikasi. Sebagai contoh, kita boleh menentukan API_URL tetap dalam fail dan menetapkannya kepada rentetan URL tertentu.

export const API_URL = 'http://example.com/api';

Dalam kod di atas, kami mengeksport API_URL tetap sebagai pemalar JavaScript, kemudian mengimport dan menggunakannya dalam komponen Vue yang lain.

import { API_URL } from './constants';

export default {
  created() {
    console.log(API_URL);
  }
}

Dalam kod di atas, kami mengimport API_URL daripada fail malar dan mencetak nilainya dalam cangkuk yang dicipta komponen.

Kelebihan menggunakan fail tetap ialah anda boleh mengatur data tetap aplikasi dengan lebih baik, mengelakkan pencemaran berubah-ubah dan meningkatkan kebolehbacaan dan kebolehselenggaraan fail.

Kesimpulan

Dalam aplikasi Vue, menyimpan data malar adalah operasi yang diperlukan. Kita boleh menggunakan pembolehubah global, Vuex atau fail malar untuk menyimpan data malar ini. Di bawah senario dan keperluan yang berbeza, kita harus memilih kaedah yang paling sesuai untuk menggunakannya.

Atas ialah kandungan terperinci Storan data malar tidak berubah dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!