Vue persistent state

This plugin lets you persist state in Vue through localStorage. Nice for prototyping and small projects, when vuex is too much.

Install

npm install vue-persistent-state

Usage

import Vue from 'vue'
import persistentState from 'vue-persistent-state'

let initialState = {
  str: 'persist me',
  obj: {
    a: 'nested object'
  },
  number: 42,
  arr: ['item 0']
}

Vue.use(persistentState, initialState)
// initialState is injected as data in all vue instances
// any changes to state will be stored in localStorage

This gives you a global mutable state, available in all Vue instances. Any changes to state will be stored in localStorage. If the page is refreshed, initialState is merged with state from localStorage.

You can mix this with local state in components, data will be merged and local state takes preference if there are any name crashes. To avoid name crashes you might want to use a namespace:

let initialState = {
  persisted: {
    str: 'persisted state under namespace `persisted`'
  }
}

Vue.use(persistentState, initialState)

If you need access to localStorage, $store is available. Example:

new Vue({
  methods: {
    reset: function () {
      // remove all state from localStorage
      // NOTE: does not alter state
      this.$store.clearAll()
      // if you need to alter state too, this might be better:
      this.persistedProperty = []
    }
  }
})

store has the methods set, get, remove, clearAll and each. For more, see store API.

Full example and demo

Demo

import Vue from 'vue/dist/vue.esm.js'
import persistentState from 'vue-persistent-state'

let initialState = {
  str: 'persist me',
  obj: {
    a: 'nested object'
  },
  number: 42,
  arr: ['item 0']
}

// inject initialState as data
Vue.use(persistentState, initialState)

// works with components too
Vue.component('a-component', {
  template: `<span>Array contents: {{arr.join(', ')}}</span>`
})

new Vue({
  el: '#app',
  template: `
    <div>
      <input v-model="str">
      <button @click="arr.push(str)">Add to array</button><br>
      <input v-model="obj.a"><br>
      {{ number }} <button @click="number++">Inc</button><br>
      <a-component/><br>
      <button @click="reload">Reset</button><br><br>
      State is persisted, try refreshing the page!<br>
    </div>`,
  methods: {
    reload: function () {
      // remove all persisted state
      this.$store.clearAll()
      // reload page
      window.location.reload()
    }
  }
})

License

ISC