3 способа предварительно пропадать штат вашего Vue.js Global Store

Когда вы строите Vue.js Приложения, и они начнут достигать определенного размера, вы, вероятно, столкнетесь с необходимостью глобального управления государством. Удобно, что основная команда разработчиков предоставляет Vuex , Де -факто государственная библиотека управления для приложений vue.js.

Начало работы довольно просто, и я предполагаю, что вы уже знакомы с внедрением Vuex. Этот пост не о начале работы в конце концов. Если вам это нужно, то я бы порекомендовал проверить Документация Анкет

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

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser (state, user) {
      state.user = user
    }
  },
})

Состояние магазина начинается с пустого Пользователь объект и setuser Мутация, которая может обновить состояние. Затем в нашем приложении мы можем показать данные пользователя:

Таким образом, когда приложение загружается, он показывает пользователю желанное сообщение, если он вошел в систему. В противном случае он говорит им, что им нужно войти в систему. Я знаю, что это тривиальный пример, но, надеюсь, вы столкнулись с чем -то подобным.

Если вы похожи на меня, возникает вопрос:

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

Ну, есть несколько вариантов.

Установить начальное состояние

Наиболее наивный подход для предварительной заполнения вашего глобального магазина-установить начальное состояние при создании своего магазина:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: { name: "Austin" }
  },
  mutations: {
    setUser (user) {
      state.user = user
    }
  }
})

Очевидно, что это работает только в том случае, если вы заранее знаете подробности о пользователе. Когда мы создаем приложение, мы, вероятно, не узнаем имя пользователя, но есть еще один вариант.

Мы можем воспользоваться LocalStorage Однако сохранить копию информации пользователя. Когда они вошли, вы устанавливаете детали в LocalStorage , и когда они входят в систему, вы удаляете детали из LocalStorage Анкет

Когда приложение загружается, вы можете извлечь данные пользователя из LocalStorage и в начальное состояние:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: localStorage.get('user')
  },
  mutations: {
    setUser (user) {
      state.user = user
    }
  }
})

Если вы работаете с данными, которые не требуют супер жестких ограничений безопасности, то это работает довольно хорошо. Я бы порекомендовал vuex-persistedstate Библиотека, чтобы помочь автоматизировать это.

Имейте в виду, что вы никогда не должны хранить очень конфиденциальные данные, такие как токены Auth в LocalStorage Потому что это может быть Нацеленный на атаки XSS . Таким образом, наш пример работает нормально для имени пользователя, но не для чего -то вроде токена Auth. Они должны храниться только в памяти (которая все еще может быть Vuex, просто не сохраняется).

Запросить данные Когда приложение устанавливается

Теперь скажем по какой -то причине, которую мы не хотим хранить данные в LocalStorage Анкет Наш следующий вариант может состоять в том, чтобы оставить наше начальное состояние пустым и позволить наше заявление на установку. После того, как приложение установлено, мы можем сделать некоторый HTTP -запрос на наш сервер, чтобы получить наши данные, а затем обновить глобальное состояние:

Это работает нормально, но теперь у нас есть странный пользовательский опыт. Приложение загрузит и отправит запрос, но хотя пользователь ждет, когда запрос вернется, он видит «вы, вероятно, должны войти в систему. «Когда запрос возвращается, предполагая, что у них зарегистрировано сеанс, это сообщение быстро превращается в« Привет {{user.name}} , Добро пожаловать!”. Эта вспышка может выглядеть глупо.

Чтобы исправить эту вспышку, мы можем просто показать загрузочный элемент, пока запрос вышел:

Имейте в виду, что это очень голый пример. В вашем, у вас может быть выделенный компонент для загрузки анимации, и у вас может быть компонент вместо сообщений пользователя здесь. Вы также можете сделать этот http -запрос из действия Vuex. Концепция все еще применяется.

Запросить данные перед загрузкой приложения

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

Если мы будем иметь в виду, что магазин Vuex – это просто объект с некоторыми свойствами и методами, мы можем относиться к нему так же, как и любой другой объект JavaScript.

Мы можем импортировать наш магазин в нашем main.js Файл (или какой бы точка входа для вашего приложения) и вызовите наш HTTP -запрос перед установкой приложения:

import Vue from "vue"
import store from "./store"
import App from "./App.vue"

fetch('/user')
  .then(r => r.json())
  .then((user) => {
    store.commit('setUser', user)
    new Vue({
      store,
      render: (h) => h(App),
    }).$mount("#app")
  })
  .catch((error) => {
    // Don't forget to handle this
  })

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

Однако…

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

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

Заключительные замечания

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

Я также должен упомянуть, что, хотя мои примеры, которые я делаю Fetch Запросы затем используют мутации vuex для непосредственного посвящения в магазин. Вы можете так же легко использовать действия VEUEX для реализации принести . Вы также можете применить эти же принципы к любому другому инструменту управления государством, таким как Vue.Observable.

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

Оригинал: “https://dev.to/austingil/3-ways-to-prepopulate-your-vue-js-global-store-s-state-1b3p”