Управление состоянием Vuex с помощью NuxtJ в «универсальном» режиме - PullRequest
0 голосов
/ 17 ноября 2018

Я привык использовать localStorage с Vuex, но, как вы знаете по SSR, мы не можем использовать localeStorage.Поэтому я искал решение сохранить Vuex state при обновлении страницы и работать с vuex-persistedstate, используя js-cookie много раз.Мой вопрос в том, что мне действительно нужно vuex-persistedstate?Я имею в виду, что я могу просто использовать js-cookie, как показано ниже:

import Cookie from 'js-cookie'

const state = {
  firstName: Cookie.get('firstName)
}

const mutations = {
  setFirstName(state, name) {
    state.firstName = name;
    Cookie.set('firstName', name)
}

и т. Д.

1 Ответ

0 голосов
/ 17 ноября 2018

После вашего комментария вопрос. Ваш пример в вопросе подходит для настройки cookie. Сначала я включаю свой в действие, а затем фиксирую мутацию, чтобы установить только состояние. Что касается получения файлов cookie, вам может потребоваться немного больше, чем просто установка состояния. Как я уже сказал, я использую cookie ( см. Здесь ) для получения своих файлов cookie, и я получаю их через nuxtServerInit, например:

nuxtServerInit({dispatch}, context) {
              return Promise.all([
                dispatch('get_cookies', context),
                //other actions
              ]);
            },

и само действие следующим образом:

get_cookies (vuexContext, context) {
              return new Promise((resolve, reject) => {
                const cookieConst = cookie.parse(context.req.headers.cookie || '')
                if (cookieConst.hasOwnProperty('YourCookieName')) {
                    //commit mutations here
                }
                else {
                    resolve(false)
                }
              })
            },

Очевидно, вам нужно импортировать:

import cookies from 'js-cookie'
import cookie from 'cookie'

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

...