StatefulURL is a Vuex plugin that can hydrate the state for the store from a compressed query string

vuex-statefulurl.js

// npm install --save json-url
const jsonURL = require('json-url')('lzw');

/**
 * StatefulURL is a Vuex plugin that can hydrate the state from a query string
 *
 * @param {Object} config = {}
 * @param {String} config.key the query string value to look for the default state
 * @param {Boolean} config.update if you want the URL to be updated when the state changes
 *
 * @returns {Function<void>|void}
 */
export default function StatefulURL (config = {}) {
  // bail if not in a browser or missing features
  if (typeof window === 'undefined' && typeof window.URLSearchParams === 'function') {
    return;
  }

  const key = config.key || 'state';
  const search = new window.URLSearchParams(window.location.search);
  const urlState = Object.fromEntries(search.entries()).state || null;

  /**
   * Store plugin
   *
   * @param {Object} store
   */
  return function (store) {
    if (urlState) {
      jsonURL
        .decompress(urlState)
        .then((json) => {
          try {
            Object.entries(json)
              .forEach(([prop, value]) => {
                store.state[prop] = value;
              });
          } catch (e) {}
        });
    }

    store.subscribe((mutation, state) => {
      const search = new window.URLSearchParams(window.location.search);

      jsonURL
        .compress(state)
        .then((currentState) => {
          search.set(key, currentState);
          const url = new URL(window.location.href);
          url.search = '?' + search.toString();

          const path = url.toString();

          window.history.replaceState({ path }, document.title, path);
        });
    });
  };
};