Если вы похожи на меня, вам нравится создавать простые веб-приложения и веб-сайты с помощью VueJS, и если вы раньше играли с Google Firebase, я уверен, что вы согласитесь:

- Vuex отлично подходит для управления вашими данными в приложении VueJS.
- Cloud Firestore - отличная база данных для Google Firebase.

Однако я обнаружил, что переписываю связь между Vuex ⇔ Firestore для каждого приложения, которое я создал. Вот тогда я подумал:

Что, если бы Vuex мог автоматически синхронизироваться с Firestore? Почему это не могло быть простой функцией или плагином, который можно было бы повторно использовать в любом проекте?

Вот почему я сделал Vuex Easy Firestore 🔥
→ Простое соединение firestore и vuex: двусторонняя синхронизация с нулевым шаблоном!

Какая проблема сейчас?

Давайте сразу же покажем несколько примеров кода, чтобы объяснить, что решает vuex-easy-firestore.

Допустим, у вас есть приложение Pokémon 😃 и такой модуль pokeDex:

const pokeDex = {
  state: {
    pokemon: {
     ‘001’: {name: ‘Bulbasaur’, seen: false, caught: false}
    }
  }
}
const store = {
  modules: { pokeDex }
}

Это была легкая часть - настроить простой модуль Vuex.
Проблема в том, что теперь вам нужно написать свою фактическую логику:

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

Написание всего этого шаблона - не проблема, верно? Но видите ли, вы должны делать это каждый раз! для любого приложения, которое вы создаете, для нескольких модулей, для разных сценариев. Чтобы не говорить о тестировании на ошибки во всевозможных сценариях использования ...

Вы тратите много времени на инфраструктуру. НЕ создавать собственное приложение, а просто правильно синхронизировать.

Как это можно решить?

Что, если бы я сказал вам, что вы получаете все эти функции для добавления / обновления данных и автоматической синхронизации всего с Firestore!

Это vuex-easy-firestore

Я создал его с простой целью: минимальные настройки для автоматической двусторонней синхронизации

В соответствии с приведенным ниже примером просто добавьте 4 строки с информацией о том, как подключить Vuex к Firestore:

const pokeDex = {
  firestorePath: ‘users/{userId}/pokeDex’,
  firestoreRefType: ‘collection’,
  moduleName: ‘pokeDex’,
  statePropName: ‘pokemon’,
  // your state
  state: {
    pokemon: {
      ‘001’: {name: ‘Bulbasaur’, seen: false, caught: false}
    }
  }
}

Этого достаточно для полной автосинхронизации! Vuex-easy-firestore загрузит ваши данные с сервера по адресу firestorePath и добавит их в модуль vuex в store [moduleName] [statePropName ] `.

У вас также будут автоматически сгенерированные действия для добавления / редактирования / удаления данных!

Давайте добавим покемона:

const newPokemon = {name: ‘Squirtle’}
dispatch(‘pokeDex/insert’, newPokemon)

Vuex-easy-firestore автоматически (1) прикрепит идентификатор (2) добавит элемент в состояние через синхронизацию mutation (3) с Firestore.

Помимо `insert` вы также можете использовать:

・ `patch` для редактирования данных. Просто передайте также `id`.
・ `set` будет либо редактировать, либо добавлять, он проверяет, существует ли элемент или нет.
・ `delete` и передайте только `id`.

И, конечно же, другие модули можно так же легко синхронизировать с другими путями Firestore!

Подожди, а что во всем этом такого хорошего?

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

  • Двусторонняя синхронизация, которая автоматически добавляет ваши документы с сервера в модуль Vuex и синхронизирует изменения обратно.
  • Неважно, сколько вы `patch` или `insert`, vuex-easy-firestore автоматически создает пакеты для оптимизации количества вызовов API.
  • Настройте хуки до / после редактирования
  • Фильтры, определяющие, какие документы загружаются при открытии страницы.
  • Действие для получения и добавления других / дополнительных документов с тем же путем (с другими фильтрами)
  • Автоматические поля created_at, updated_at, created_by, updated_by
  • Установите fillables / guard, чтобы предотвратить синхронизацию определенных свойств.

И многое другое…

Чего же ты ждешь? Попробуйте и дайте мне знать, что вы думаете !! См. полную документацию здесь.

Еще кое-что…

Наконец, позвольте мне поделиться еще одной функцией, это одна из моих любимых. 😊

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

С помощью vuex-easy-firestore вы можете установить значения по умолчанию, которые добавляются к документам при вставке, а также после получения с сервера.

defaultValues: {
  newProp: ‘’
}

Определение этих defaultValues ​​ в конфигурации vuex-easy-firestore добавит свойство newProp в каждый документ, полученный с сервера. Таким образом, у вас нет проблем с реактивностью Vuejs, где ожидаемое значение отсутствует.

Три аплодисментов за значения по умолчанию! 👏 🙌 👏

Спасибо, что оставались со мной до конца! Дайте мне знать, что вы думаете об этом. Я надеюсь, что с его помощью я смогу облегчить жизнь хотя бы нескольким людям.

・ Github ⭐️
・ Документация 📃
・ Мой Twitter: @mesqueeb

Я также открыт для любых предложений и пожеланий! Откройте вопрос на Github или напишите мне в Твиттере. 👍

Фотография Йоханнеса Гролла на Unsplash