vuex-persistedstate - JSFiddle

Basic example of the vuex-persistedstate plugin

by Robin van der Vleuten

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.4.0/dist/vuex.js"></script>
<script src="https://unpkg.com/vuex-persistedstate@latest"></script>
<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <small>
    Check out your localStorage to see the updates.
  </small>
</div>

Babel + JSX

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
        store.commit('increment');
      },
      decrement() {
        store.commit('decrement');
      }
  }
});