Setting up vuex store

To enable Vuex, all you have to do is add an index.js in the store directory. Here is a basic vuex store file:

import Vuex from 'vuex'

const store = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations: {
      increment(state) {
        state.counter++;
      },
      resetCounter(state) {
        state.counter = 0;
      }
    },
    actions: {
      resetCounter({commit}) {
        commit('resetCounter');
      }
    },
    getters: {
      getCounter: state => state.counter
    }
  })
}

export default store

Once added, the vuex store can be accessed in pages using this.$store. (i.e. this.$store.state, or this.$store.getters)

Note: the variable is called $store not $state!

Dynamic pages