1

Как сохранить состояние корзины во Vuex после перезагрузки (store разбит на модули(меню, продукты, корзина))?

0

1 ответ 1

2

Есть прекрасный плагин, называется vuex-persistedstate

yarn add vuex-persistedstate@latest

Этот плагин использует localStorage (или sessionStorage, если передать параметром) браузера для сохранения текущего состояния приложения:

import Vue from 'vue';
import Vuex, { Store } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Store({
    // ваш стейт
    state: {},
    // ваши мутации
    mutations: {},
    // ваши экшены
    actions: {},
    plugins: [createPersistedState()]
});

Не забываем зарегистрировать store в инициализации приложения:

import store from './path-to-store';

new Vue({
    store,
    render: (h) => h(YOUR_APP_COMPONENT)
}).$mount('#app');

Вкратце что делает этот плагин:

localStorage.setItem(key, JSON.stringify(state));

Сохранение в localStorage происходит после каждого commit, а чтение после каждой загрузки страницы:

// source код функции `getState` из плагина

function getState(key, storage, value) {
    try {
        return (value = storage.getItem(key)) && typeof value !== 'undefined'
        ? JSON.parse(value)
        : undefined;
    } catch (err) {}

    return undefined;
}

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

const cart = {
    namespaced: true,
    state: { ... }
};

new Store({
    .....,
    modules: {
        cart
    }
});

Это позволяет нам избежать конфликта мутаций с одинаковым названием, коммитим мутацию через название модуля + / + мутация:

store.commit('cart/mutationName', mutationValue);
12
  • Описал код, который у меня с плагином - почему то не работает
    – Aex Fun
    7 авг 2018 в 16:21
  • @AexFun, ну во первых вынесите плагин на верхний уровень, в главный стор
    – arturovt
    7 авг 2018 в 16:48
  • Да, у меня namespaced: true стоит, но даже когда я выносил в главный store, почему не работает, мало того, даже главная не открывается (запускаю через webpack командой npm run dev)
    – Aex Fun
    7 авг 2018 в 20:29
  • ага, вынес плагин в главный store и поставил в самый конец - УРА заработало) большое вам спасибо
    – Aex Fun
    7 авг 2018 в 20:36
  • У меня через каждый запуск npm run dev сохраняется состояние, а когда spa будет выложено на хостинг, при каждому обращении на сервер состояние будет обнуляться или тоже сохраняться?
    – Aex Fun
    7 авг 2018 в 20:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.