How to save trash state in Vuex

There is a wonderful plugin called vuex-persistedstate

yarn add vuex-persistedstate@latest 

This plugin uses localStorage (or sessionStorage , if passed by a parameter) of the browser to save the current state of the application:

 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()] }); 

Do not forget to register the store in the application initialization:

 import store from './path-to-store'; new Vue({ store, render: (h) => h(YOUR_APP_COMPONENT) }).$mount('#app'); 

In short, what this plugin does:

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

Saving to localStorage occurs after each commit , and reading after each page load:

 // source код функции `getState` из плагина function getState(key, storage, value) { try { return (value = storage.getItem(key)) && typeof value !== 'undefined' ? JSON.parse(value) : undefined; } catch (err) {} return undefined; } 

Since your storage is divided into modules, each module must have a local namespace:

 const cart = { namespaced: true, state: { ... } }; new Store({ ....., modules: { cart } }); 

This allows us to avoid the conflict of mutations with the same name, commit a mutation through the name of the module + / + mutation:

 store.commit('cart/mutationName', mutationValue);