How to use vuex-persistedstate - 9 common examples

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import { browser } from 'webextension-polyfill-ts';
import initialStore from 'common/vuex/initial-store';
import { initializeRemoteMaster } from 'common/vuex/remote-interface';

Vue.use(Vuex);
const bgInitialStore = Object.assign({ plugins: [] }, initialStore);
bgInitialStore.plugins.push(createPersistedState());
const store = new Vuex.Store(bgInitialStore);
initializeRemoteMaster(store);

if(browser.runtime.lastError && browser.runtime.lastError.message)
  console.error('lastError:', browser.runtime.lastError.message);

// one day return user profiles too eh?
function search(text: string) {
  return store.state.apps.apps.filter(a => a.name.substr(0, text.length).toLowerCase() === text.toLowerCase());
}

browser.webRequest.onBeforeRequest.addListener((details) => {
    if(/^(data|chrome-extension|moz-extension):/.test(details.url) || /\.(png|jpg)$/.test(details.url)) return;
    // console.log('going places!', details.url);

    if(/(?:(?:^blockstack\:)|(?:blockstack\.org\/auth\?authRequest=))(.+)/.test(details.url)) {

* used to reset global state
 */
import { stateSnapshot } from 'UTILS/storage'
const initialState = Object.keys(modules).reduce((snapshot, moduleName) => {
  snapshot[moduleName] = modules[moduleName].state
  return snapshot
}, {})
stateSnapshot.setItem(Object.assign(initialState, state))

/**
 * @description Vuex persisted state
 */
const __DEV__ = process.env.NODE_ENV === 'development'
// https://github.com/robinvdvleuten/vuex-persistedstate
// https://github.com/js-cookie/js-cookie
const persistedState = createPersistedState({
  key: STORE_KEY,
  // default: window.localStorage
  storage: {
    getItem: key => Cookies.get(key),
    // `expires: default`: Cookie is removed when the user closes the browser.
    setItem: (key, value) => Cookies.set(key, value, { secure: !__DEV__ }),
    removeItem: key => Cookies.remove(key, Cookies.get(key))
  }
})

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  state,
  mutations,

import VuexPersistence from 'vuex-persistedstate'
// 采用cookie 的方式 https://github.com/js-cookie/js-cookie
// import Cookies from 'js-cookie'

// 如果文件里面没有 export default 需要用 import * as xxx from ''
import actions from './actions'
import mutations from './mutations'
import getters from './getters'

// 子模块里面的vuex
import counter from './modules/counter'

// 实例化Vuex
Vue.use(Vuex)

const vuexLocal = VuexPersistence({
  storage: window.localStorage
})

// 采用cookie的方式存储
// const vuexCookie = VuexPersistence({
//   storage: {
//     getItem: key => Cookies.get(key),
//     setItem: (key, value) => {
//       Cookies.set(key, value, {
//         expires: 24000000000,
//         secure: false
//       })
//     },
//     removeItem: key => Cookies.remove(key)
//   }
// })

function configState(vue) {

  // Defaults
  // Config which paths to persist automatically
  const pathsToPersist = [
    'application.state.lastPath',
    'settings',
  ];

  const vuexPlugins = [
    VuexPersistedState({
      key: 'consentcookie',
      paths: pathsToPersist,
    }),
  ];

  vue.use(Vuex);

  // Init the Vuex Store with the default config
  return new Vuex.Store({
    plugins: vuexPlugins,
    state: {
      view: {
        title: '',
        content: {
          size: null,
        },

function getStore(persist = false, config = {}){

  Vue.use(Vuex);

  const plugins = [createFlashStore(config)];

  if(persist){

    plugins.push(
      createPersistedState({
        paths: ['FLASH'],
        key: '__vuexFlash',
        storage: window.sessionStorage,
        filter: mutation => {
          return mutation.type === 'FLASH/SET_FLASH';
        }
      })
    );
  }

  return new Vuex.Store({
    plugins
  });
}

export function persist(key) {
  createPersistedState({
    key,
    paths: [
      'auth.uid',
      'auth.secret',
      'auth.webUrl',
      'auth.apiUrl',
      'entities.data.trackers',
      'activites.stopOnSuspend',
      'activites.stopOnShutdown'
    ],
    storage: {
      getItem: key => storage.get(key),
      setItem: (key, value) => storage.set(key, value),
      removeItem: key => storage.delete(key)
    }
  })(store);

export default function createStore() {
  return {
    modules: {
      library,
      reader,
      [scaifeWidgets.namespace]: scaifeWidgets.store,
    },
    plugins: [
      createPersistedState({
        paths: [
          'reader.sidebarLeftOpened',
          'reader.sidebarRightOpened',
          'reader.textMode',
        ],
        storage: window.localStorage,
      }),
    ],
    strict: true,
    debug,
  };
}

import app from './modules/app';
import auth from './modules/auth';
import user from './modules/user';
import search from './modules/search';
import player from './modules/player';
import library from './modules/library';
import playlist from './modules/playlist';
import notification from './modules/notification';

import spotifyApiPlugin from '@/api/spotify/plugin';

const debug = process.env.NODE_ENV !== 'production';

Vue.use(Vuex);

const persistedState = vuexPersistedstate({
  key: 'spotify_app_state',
  reducer: state => ({
    auth: state.auth,
  }),
});

export default new Vuex.Store({
  modules: {
    app,
    auth,
    user,
    search,
    player,
    library,
    playlist,
    notification,