Vuex helper methods for mutations

Question

In Vuex, I have my mutations object as follows:

 mutations: {
     someMethod(){
        this.someReusableCode();
     },
     anotherMethod(){
        this.someReusableCode();
     },
     someReusableCode(){
       ...
     }
 }

However, I'm getting an error that someReusableCode() isn't defined. Where is the best place to define my someReusableCode() method so this will work?

Answer 1

You could define a shared method off the store object (instance of Vuex.Store).

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) { this.inc(state) },
    decrement(state) { this.dec(state) }
  }
})

// Shared functions of store
store.inc = state => state.count++;
store.dec = state => state.count--;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) { this.inc(state) },
    decrement(state) { this.dec(state) }
  }
})

// Shared functions: inc() and dec()
store.inc = state => state.count++
store.dec = state => state.count--

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

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>