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?

Marozik

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>

Forestaysail

Thanks and I like your solution, however in our case we are using a file structure so that we're defining the Vuex parameter object in its own store.js file using export default {}, and then in our main-vue.js file we're doing import store_object from store.js' and then let store = new Vuex.Store(store_object);. I would prefer to keep the helper methods in store.js`. I did find that adding the helper methods outside of the object in store.js works, but not sure if this is the best idea. Any feedback on that strategy would be appreciated. – Marozik

Answer 2

You can keep the helper methods inside store.js. Just do this:

export default new Vuex.Store({
  state: {
    count: 0
  },
  helperMethods: {
    inc: (input, increment) => input + increment
  mutations: {
    incrementByFive(state) { state.count = this.helperMethods.inc(state.count,5) },
  }
})

Hufuf

didn't work for me. this.helperMethods is undefined – Spirogyra

I did manage to get this to work with const helperMethods - and using helperMethods.inc (no this) – Assiniboine

This is the right answer, but yes, I had to deviate from the above solution, answer below, but with Vue3: const helperMethods = { hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; }, }; Calling from mutation: RGB=helperMethods.hexToRgb(state.Theme[ThemeKeys[x]]) – Babur

Answer 3

@siem simonis has the right answer, though with Vue3 I did it this way:

const helperMethods = {
componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  },
  rgbToHex(r, g, b) {
    return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
  },
  hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  },};

Then to call the helper:

RGB=helperMethods.hexToRgb(state.Theme[ThemeKeys[x]])

And you do not need to add it to you export at the end of your store, just FYI.

Babur