Vuex: mapActions with local Component methods?

[junerockwell]

I get a module build failed: SyntaxError:

I'm using Vuex with Vuex-Router-Sync. Versions below:

"dependencies": {
    "vue": "^2.0.1",
    "vue-router": "^2.0.0",
    "vuex": "^2.0.0",
    "vuex-router-sync": "^3.0.0"
  }

This is my counter.js module:

const state = {
  count: 0
};

const mutations = {
  increment (state) {
    state.count++;
  }
};

const getters = {
  count (state) {
    return state.count;
  },
}

const actions = {
  increment ({state, commit}) {
    commit('increment')
  }
}

export default {
  state,
  mutations,
  getters,
  actions
}

My main store.js:

import Vue from 'vue';
import Vuex from 'vuex'

import counter from './modules/counter';
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  },
  strict: process.env.NODE_ENV !== 'production'
});

My Page1.vue

<template>
<p>{{ count }}</p>
<button @click="increment()">Increment</button>
<button @click="toggle()">Show Modal</button>
<my-modal :show="show"></my-modal>
</template>

<script>
import MyModal from '../components/MyModal';
import { mapActions } from 'vuex';

export default {
  components: {
     MyModal
  },
  computed: {
     count () {
        return this.$store.getters.count
     }
  }, 
  data() {
    return {
      show: false
    }
  },
  methods: {
     mapActions(['increment']),
    toggle() {
       this.show = !this.show;
    }
  }
}
</script>

The above methods property for Page1.vue gives the Module build failed: SyntaxError. But if change that methods to this:

methods: mapActions(['increment])

...there's no error. And, I can do @click="increment()". But how do I make local component methods like toggle() if I have to do it this way?

There are times when I would want to declare local component methods. So I tried using ... before mapActions that a few examples are doing:

methods: {
 ...mapActions(['increment']),
 toggle() {
   this.show = !this.show;
 }
}

I get a new error:

And when I click the Increment button, I get an error saying that "increment" is not defined on the instance and a TypeError that increment is not a function:

When I click the Show Modal button, I get the same error:

For now, what works for me is not using mapActions:

methods: {
  increment() {
     this.$store.dispatch('increment')
  },
  toggle() {
    this.show = !this.show;
  }
}

[nicolasparada]

The correct way is

methods: {
  ...mapActions(['increment']),
  toggle() {
    this.show = !this.show;
  }
}

or

methods: Object.assign({}, 
  mapActions(['increment']),
  {
    toggle() {
      this.show = !this.show;
    }
  }
}

In the first case you need the correct plugin.

[ktsn]

As @NicolasParada says.

[junerockwell]

I tried the first one:
I installed the Object Rest Spread (version 6.16.0) you recommended and the es2015 Destructuring (version 6.16.0) to use it. I installed them as devDependencies. Then modified the .babelrc file's "plugins":

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime", "transform-es2015-destructuring","transform-object-rest-spread"],
  "comments": false
}

But I still get this error:

And I have Cannot GET / on the browser.

I copied and pasted the second one which gave me a syntax error so I replaced the last bracket with a closed parenthesis. I still get the error (see screenshot on this post) and my @clicks produce these errors as well:

Is there anything that I'm missing? Should upgrade my Node from 4.x to 6? I upgrade to node version 6.6.0. But I still get the same error.

[junerockwell]

Ok I fixed it! Thanks for the hint @NicolasParada!

For anyone who can't get it to work, I had to do these additional things:

So the [email protected] template via Vue-CLI came with [email protected] and [email protected]. I installed their latest versions; [email protected] and [email protected].

[emiranda04]

Great job @nicolasparada!!

[manavm1990]

Love how @nicolasparada wrote it the 'fancy' way and also the 'long' way. That makes it more clear what is going on for those of us who are not quite 'ninja status' with the ES2015/18 syntax.