@alexmixaylov

Как передавать данные между разными скриптами(компонентами) в нативном js?

На сайте разметка рендерится сервером, изначально все выглядит как обычный мультипейдж

Но там есть сложный фильтр, который по апи подтягивает данные из базы. Если юзер использует фильтр, то перерисовывать страницу хочу с помощью js (vue)
Плюс еще два дополнительных инпута (сортировка и пейджинг)

Все это хозяйство формирует поисковую строку, вся логика и фильтр и сортировка реализована на бекенде

возникает вопрос как хранить данные, чтобы все это хозяйство могло взаимодействовать
нужен какой то State || Store, какая то шина через которую можно поддерживать актуальное состояние
чтобы можно было подписаться на изменение и дергать апишку

Второй вопрос - рендерить полученный c сервера результат хочу при помощи VUE
для этого ему нужно как-то передать входные данные

Что в данном случае можно использовать чтобы синхронизировать данные между формами и как правильно запушить данные во вью компонент?

На ум ничего кроме локалсторадж не приходит, может есть какие то другие варианты?
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 1
@zkrvndm Куратор тега JavaScript
Софт для автоматизации
Используйте localForage - это специальный драйвер для облегчения работы со встроенными браузерными базами данных. Локальные БД хороши, но у них сложный синтаксис, плюс все эти версии могут легко запутать новичка.

В отличии от localStorage, используя localForage можно хранить практически неограниченное количество данных. При этом объекты, массивы, блобы и даже файлы можно скармливать напрямую, localForage их потом выдаст в том же виде в каком вы ему скормили - имеется в виду тип данных, ну там Object, String, Blob, File и так далее.

Сравните два кода выполняющих одно и то же:

Код IndexedDB:
spoiler
// IndexedDB.
var db;
var dbName = "dataspace";
 
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
 
var request = indexedDB.open(dbName, 2);
 
request.onerror = function(event) {
    // Обработка ошибок.
};
request.onupgradeneeded = function(event) {
    db = event.target.result;
 
    var objectStore = db.createObjectStore("users", { keyPath: "id" });
 
    objectStore.createIndex("fullName", "fullName", { unique: false });
 
    objectStore.transaction.oncomplete = function(event) {
        var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
    }
};
 
// После того, как БД создана, добавим туда запись о пользователе
 
var transaction = db.transaction(["users"], "readwrite");
 
// Как-то отреагируем на окончание процесса записи в базу
transaction.oncomplete = function(event) {
    console.log("All done!");
};
 
transaction.onerror = function(event) {
    // Не забываем обрабатывать ошибки
};
 
var objectStore = transaction.objectStore("users");
 
for (var i in users) {
    var request = objectStore.add(users[i]);
    request.onsuccess = function(event) {
        // Выведем в консоль информацию о каждом добавленном пользователе
        console.log(event.target.result);
    };
}


Код localForage:
spoiler
// Сохраняем информацию о пользователях
var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
localForage.setItem('users', users, function(result) {
    console.log(result);
});


Синтаксис localForage отдаленно похож на localStorage, с той лишь разницей, что localForage работает асинхронно и не тормозит основной поток. Для работы с localForage можно использовать колбеки, промисы или async / await. Подробная информация с примерами доступна на гитхабе.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы