Рубрики
Без рубрики

Возможно, вам не понадобится Vuex. Вот некоторые альтернативы

Первоначально опубликовано на Michaelzanggl.com. Подписаться на мой рассылку, чтобы никогда не пропустить новый контент …. Теги от Vue, JavaScript.

Первоначально опубликовано в michaelzanggl.com Отказ Подписаться на Моя рассылка никогда не пропустить новый контент.

Давайте посмотрим на два подхода, которые вы можете предпринять до достижения Vuex!

Первый подход (для простых веб-сайтов)

Рассмотрим типичный спа, который обычно разделен страницей (Vue-маршрутизатор), как традиционный сайт.

Ваше приложение, вероятно, имеет следующие три типа государства:

  1. Местный государственный эксклюзивный для компонента
  2. Глобальное состояние, которое необходимо поделиться по маршрутам
  3. Общее состояние в пределах маршрута

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

Что касается второго типа состояния, Vue позволяет определять данные, методы и все остальное, что вам может понадобиться в Vue Root.

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '',
  data() {
    return {
      isLoggedIn: false
    }
  }
})

В каждом компонент вы можете получить доступ – это через root , например Это. $ root.isloggedin Отказ Это очень полезно для таких вещей, как пользовательский экземпляр.

Но как насчет третьего типа государства? Общее состояние в пределах маршрута. Без государственного управления вы, вероятно, собираетесь пропустить в глубине нескольких компонентов. И вы знаете, что, во многих случаях, это просто хорошо! Но вот небольшой трюк, если вы действительно хотите поделиться штатом на маршруте.

Оказывается, Vue на самом деле позволяет получить доступ к всему состоянию и методам от корневого маршрута в любом из его подкомпонентов.

Сказать, что корню маршрута выставляет данные {isopen: false} Отказ

В любом подкомпоненте вы можете получить доступ к этому недвижимому имуществу:

this.$route.matched[0].instances.default.isOpen

Хорошо, это очень очень многословие! Но это работает!

Позвольте мне представить вам маленький плагин Я писал, что превращается выше:

this.$routeRoot.isOpen

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

  • Vuex переопределяет то, как вы пишете состояние, методы, вычисленные поля, все действительно. С таким подходом вы можете использовать ваши существующие знания. Вы все еще пишете государство внутри «Данные», у вас все еще есть методы, вычисленные поля, буквально ничего не изменяются. Есть только одна парадигма.
  • С Vuex все ваше государство глобально. Уверен, что вы можете определить модули, но вы все еще вручную должны выбрать, из какого модуля, чтобы получить ваше состояние, даже если вы уже находитесь внутри определенного маршрута. Когда я нахожусь на странице настроек, мне все равно, у какого состояния было использоваться на странице профиля и т. Д.

Существует также второй способ использовать этот плагин. Вместо того, чтобы регистрировать его, вы можете сопоставить свойства от двух корней в локальный компонент, если вы предпочитаете это.

import { mapRoot } from 'vue-route-root'

export default {
  // first one from $root, second and third one one from route root
  computed: mapRoot(['user', 'isOpen', 'setOpen']),
}

Это имеет преимущество, что вы не можете просто мутировать корневое состояние из ребенка. Если вы хотите мутировать штат, вам нужно позвонить методу. Это заставляет вас размещать все состоятельные мутации в корне и гарантируют, что они не разбросаны по приложению.

Предостережения с этим подходом

Vue Documentation не рекомендует использование $ root, потому что он «масштабируется плохо». Это очень верно, если вы не осторожны. Но подумайте об этом, $ root и $ Routeroot довольно много структуры. Угадай, что происходит, когда вы не осторожны с очень очень структурированным инструментом, таким как Vuex! Если вы хотите изменить такую реализацию, вы должны сначала разрушать его, прежде чем вы можете изменить его.

Но я искренне согласна с тем, что у этого подхода есть свои пределы. Например, он заставляет вас иметь всю логику внутри корневых компонентов, что делает их довольно большой. Вы также должны быть осторожны, чтобы никогда не получить доступ к $ Routeroot в глупое/многоразовое компонент. Это также не позволяет вам все, что делает Vuex.

Второй подход

Скажите, что ваше приложение немного сложнее или следует по другому подходу.

Существует еще один плагин, который я создал, который требует больше формы Vuex, и что не использует VUE $ root или корни маршрута. Я называю это Vue-Blick Отказ

Во-первых, создайте свой магазин в простом файле .js

// store/alert-store.js

import { create } from 'vue-blick'

export default create({
  message: 'Hello', // state

  get reversedMessage() { // computed fields/getters
    return this.message.split('').reverse().join('')
  },

  async setMessage(message) { // methods/actions
    // await fetch(...)
    this.message = message
  }
})

И тогда вы можете использовать его в любом компоненте, как это




Что мне нравится в этом подходе:

  • Хотя он ближе к более традиционному государственному управлению, существуют нулевые терминологии, такие как действия, полученные, мутации, редукторы, селекторы, отправка, фиксаторы, типы действий, уменьшение редукторов и т. Д.
  • Вы все еще доступа к свойствам в пределах вычисленного поля или метода, используя Это , точно так же, как в Vue компонента
  • Мистины: [USSTORE.MAP («Сообщение», «Реверсмессаж», «SetMessage»)]]] : Только один метод для карты состояния, геттерс и методы. И только карта в одном месте … Без какой-либо разрушимости!

Так же, как главы документации Vuex: вы должны взвесить компромиссы и принимать решения, которые соответствуют потребностям вашего приложения для разработки вашего приложения. Может быть вместо этого, вы можете позволить серверу держать такое состояние, как с inertia.js Отказ Или, может быть, Vuex именно то, что вам нужно!

Если вам нравится такая статья, обязательно проверьте мою статью о упрощении Vue компонентов.

Оригинал: “https://dev.to/michi/you-may-not-need-vuex-here-are-some-alternatives-28nc”