Данные постоянного состояния Vuex + localStorage

Vuex

предисловие

В предыдущей статье мы подробно описали знания, связанные с Vuex, для тех, кто не знает, вы можете сначала узнать о нем:"Что такое Вьюкс? Что может Vuex? Как использовать Вьюкс? 》

Vuex+localStorage数据状态持久化

В этой статье в основном рассказывается о том, как сделать данные Vuex постоянными?

Как следует из названия, если браузер хочет сохранить данные, он должен использовать localStorage или sessionStorage.Могут быть друзья, которые не знают, для чего нужны эти две вещи.Скажем кратко:

И localStorage, и sessionStorage могут сохранять данные в браузере. localStorage не истечет, если не будет очищен или превышен размер, sessionStorage будет очищен после закрытия браузера.

Vuex 和 localStorage或者sessionStorage如何结合到一起了？ ? ?

магазин плагинов презентаций

Здесь мы используемstoreМожно, конечно, и не использовать, но придется писать set и get самому, что немного хлопотно.storeПлагин предназначен для инкапсуляции set, get и т. д. Storage, что более удобно в использовании.

store2

Начиная с версии 2.x функция также становилась все более и более мощной.

// === store(key, data);
store.set(key, data[, overwrite]); 
// === store({key: data, key2: data});
store.setAll(data[, overwrite]);
// === store(key);   
store.get(key[, alt]);    
// === store();         
store.getAll([fillObj]); 
// === store(key, fn[, alt]);          
store.transact(key, fn[, alt]);    
// === store(false);
store.clear();     
// returns true or false                
store.has(key);   
// removes key and its data, then returns the data                 
store.remove(key);      
// fn receives key and data (or fill), return false to exit early           
store.each(fn[, fill]);     
// concats, merges, or adds new value into existing one       
store.add(key, data);
// returns array of keys             
store.keys([fillList]);
// number of keys, not length of data        
store.size();
// clears *ALL* areas (but still namespace sensitive)           
store.clearAll();

Давайте посмотрим на конкретный пример использования

пример файла хранилища

Vuex+localStorage数据状态持久化

Создайте новый файл storage.js

import storage from 'store';

// 缓存数据的key
const WEB_NAME = 'WEB_NAME'; 

export const storage = {
  set setLocalStorageName(val) {
    if (!val) {
      storage.remove(WEB_NAME);
    } else {
      storage.set(WEB_NAME, val);
    }
  },
  get getLocalStorageName() {
    return storage.get(WEB_NAME);
  }
}

пример файла сохранения

Создайте новый файл store.js и импортируйте указанный выше файл storage.js.

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

import { storage } from './storage';

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 默认读取storage里面的数据
    name: storage.getLocalStorageName || ''
  },
  mutations: {
    setData (state, data) {
      // 拿到数据有，向state和storage里面都放入数据
      state.name = data
      storage.setLocalStorageName = data;
    }
  },
  actions: {
    getData ({ commit, state }, params) {
      let name = 'web秀 Vuex+localStorage数据状态持久化';
      commit('setData', name)
    }
})

export default store

Таким образом, при использовании состояния Vuex такие операции, как принудительное обновление страницы, не очистят значение имени. Только вручную очистив пустое значение набора поездов, можно очистить имя.

Сценарии использования сохранения состояния данных Vuex

Vuex+localStorage数据状态持久化

1. Корзина Например, после того, как вы добавите продукт в корзину, вы можете использовать этот метод, чтобы сохранить его во внешнем интерфейсе, не сохраняя в бэкэнде.

2. Состояние сеанса После уполномоченного входа в систему токен можно сохранить с помощью SessionStorage Vuex +.

3. Некоторые данные, которые не часто меняются Например, список городов и т. д. (в настоящее время также оставьте запись, которую можно обновить, например, номер версии)

Суммировать

Легко ли сохранять данные Vuex? На самом деле не нужно много усилий, чтобы это сделать. Чем больше вы практикуетесь, тем быстрее вы сможете освоить его.

Нет необходимости говорить вышеstoreПлагин тоже возможен, как решить? Просто используйте файл store.js для использованияstorageМесто можно заменить на соответствующие get и set.

Совет: localStorage.SetItem (ключ, строка), набор значений должен быть строкой, если ваши данные являются объектом, требуется первой преобразования (JSON.Stringify (xxx)), когда принимается localStorage.geteTem (ключ), если не строка, после Удаление объекта может быть изменено json.parse (xxx).

Оригинальный адрес:Сохранение состояния данных Vuex+localStorage

Категории