Vue 프로젝트는 다시 로드하지 않고 저장됩니다.-프런트엔드 Q&A-php.cn

Vue 프로젝트는 다시 로드하지 않고 저장됩니다.

PHPz

풀어 주다： 2023-05-24 11:34:37

원래의

803명이 탐색했습니다.

Vue.js는 개발자가 대화형 웹 애플리케이션을 보다 효율적으로 구축하는 데 도움이 되는 인기 있는 프런트 엔드 프레임워크입니다. Vue.js를 사용하여 프로젝트를 개발할 때 상태를 저장해야 하지만 다시 로드하고 싶지 않은 상황에 자주 직면합니다. 이 기사에서는 이 목표를 달성하기 위한 몇 가지 솔루션을 소개합니다.

1. 브라우저 로컬 저장소 사용

브라우저 로컬 저장소는 페이지를 새로 고치거나 다시 로드할 때 데이터가 유지될 수 있도록 클라이언트의 로컬 브라우저에 데이터를 저장하는 것을 의미합니다. HTML5는 localStorage와 sessionStorage라는 두 가지 기능을 제공합니다. 로컬 브라우저에 데이터를 저장할 수 있으며 다음과 같은 특징을 갖습니다.

localStorage 저장된 데이터는 클라이언트가 수동으로 삭제하지 않는 한 만료 시간이 없습니다.
sessionStorage에 저장된 데이터는 세션이 종료되면 지워집니다. 즉, 브라우저 창이나 탭을 닫으면 저장된 데이터도 지워집니다.

Vue.js 프로젝트에서 localStorage 메소드 사용:

데이터 가져오기:

var data = localStorage.getItem('key');

로그인 후 복사

저장 데이터:

localStorage.setItem('key', data);

로그인 후 복사

데이터 삭제:

localStorage.removeItem('key');

로그인 후 복사

2. Vuex 사용

Vuex는 다음을 위한 것입니다. Vue.js 애플리케이션의 상태 관리 패턴입니다. 이는 애플리케이션의 모든 구성 요소 상태를 중앙에서 관리하고 상태 업데이트가 일관되고 예측 가능하도록 보장하는 도구와 규칙을 제공합니다. Vuex를 사용하면 데이터를 전역 상태로 저장할 수 있으므로 애플리케이션 전체에서 액세스하고 업데이트할 수 있습니다. Vue.js 프로젝트에서 이 목표를 달성하려면 다음 단계를 사용할 수 있습니다.

store.js 파일 만들기:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: null
  },
  
  mutations: {
    setData (state, payload) {
      state.data = payload;
    }
  },
  
  actions: {
    setData ({commit}, payload) {
      commit('setData', payload);
    }
  });

로그인 후 복사

상태를 저장해야 하는 구성 요소의 setData() 메서드 트리거:

this.$store.dispatch('setData', data);

로그인 후 복사

필요한 경우 저장된 상태에 액세스하는 구성 요소에서 계산된 방법을 사용하여 저장된 데이터를 얻습니다.

computed: {
  userData () {
    return this.$store.state.data;
  }
}

로그인 후 복사

3. 쿠키 사용

쿠키는 클라이언트 측에서 상태를 저장하는 데 일반적으로 사용되는 또 다른 방법입니다. 쿠키는 일반적으로 사용자의 인증 자격 증명 및 기타 기본 설정을 저장하는 데 사용됩니다. Vue.js 프로젝트에서는 다음 단계를 통해 쿠키를 사용하여 데이터를 저장할 수 있습니다.

Vue.js 프로젝트에서 js-cookie 라이브러리 사용:

npm install js-cookie --save

로그인 후 복사

상태를 저장해야 하는 구성 요소에 쿠키 설정 :

import Cookies from 'js-cookie';

Cookies.set('data', data);

로그인 후 복사

State는 다른 구성 요소에서 액세스할 수 있습니다.

import Cookies from 'js-cookie';

var data = Cookies.get('data');

로그인 후 복사

4. IndexedDB 사용

IndexedDB는 브라우저에서 제공하는 기본 데이터베이스이며 구조화된 데이터를 브라우저에 저장할 수 있습니다. Vue.js 프로젝트에서는 다음 단계를 통해 IndexedDB를 사용할 수 있습니다.

myDatabase라는 IndexedDB 데이터베이스 만들기:

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function (event) {
  console.log("数据库打开失败");
};

request.onsuccess = function (event) {
  console.log("数据库打开成功!");
};

로그인 후 복사

상태를 저장해야 하는 구성 요소에서 데이터를 데이터베이스에 저장합니다.

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log("数据库打开失败");
};

request.onsuccess = function(event) {
  var db = request.result;
  var transaction = db.transaction(['data'], 'readwrite');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.put(data, 'key');
      
  request.onerror = function(event) {
    console.log("数据写入失败");
  };
      
  request.onsuccess = function(event) {
    console.log("数据写入成功");
  };
};

로그인 후 복사

저장된 상태에 액세스해야 하는 구성 요소에서 데이터베이스에서 저장된 데이터를 가져옵니다.

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log("数据库打开失败");
  };

request.onsuccess = function(event) {
  var db = request.result;
  var transaction = db.transaction(['data'], 'readonly');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.get('key');
      
  request.onerror = function(event) {
    console.log("数据读取失败");
  };
      
  request.onsuccess = function(event) {
    console.log(request.result);
  };
}

로그인 후 복사

요약:

위는 다시 로드하지 않고 상태를 저장하는 문제를 해결하는 몇 가지 방법입니다. 프로젝트 요구 사항을 구현하는 데 적합한 방법입니다. 브라우저 로컬 저장소, Vuex, 쿠키 또는 IndexedDB를 사용하든 모두 좋은 솔루션입니다. 그러나 어떤 경우에는 이러한 방법이 특정 응용 프로그램 환경에 적합하지 않을 수 있다는 점에 유의하는 것이 중요합니다. 따라서 다시 로드하지 않고 상태를 저장하려면 다양한 방법을 평가하고 가장 적절한 방법을 선택하는 것이 가장 좋습니다.

위 내용은 Vue 프로젝트는 다시 로드하지 않고 저장됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!