Точки

  • Без использования Vuex
  • Вместо этого мы используем apollo-link-state и vue-apollo.
  • Создавайте ссылки на GraphQL с помощью withClientState
  • Установите начальное значение 0 в поле countSample в defaults
  • Добавить мутацию, преобразователь которой увеличивает значение счетчика
  • Выберите, какое значение будет обрабатываться в поле apollo, без специального символа $
  • Позвонить mutation с this.$apollo.mutate

Во-первых, мы делаем ссылку с именем stateLink отличной от GraphQL.

Капсулирование GraphQL

  • Я думаю, что apollo-link-state и vue-apollo довольно сложно. Итак, мы делаем обертку apollo-link-state-store.ts.

Компонент Vue, вызывающий состояние аполло-ссылки

Резюме

  • Создаем магазин без Vuex.
  • apollo-link-state и vue-apollo немного сложны. Оболочка apollo-link-state-store.ts упрощает доступ к GraphQL.
  • Это зависит от того, какой подход вам подходит, Vuex или apollo-link-state.
  • Вы можете использовать состояние аполло-ссылки для хранения. Независимо от редукса или vuex. Эта функция важна, если у вас есть ресурсы на разных платформах.

И мы можем пойти дальше

  • Простой пример Nuxt.js
  • Перенос счетчика состояния ссылки apollo в этой статье на Nuxt.js

Вот исходный код.

https://github.com/onelittlenightmusic/nuxt-apollo-link-state-counter

А это живое демо.