uncaught syntax error and identifier with Vuex

Question

I am learning Vuex but having challenge to run mapState and i assume mapGetters and mapMutations will also impose the same challenge.

I am running the code in xampp localhost in non-node environment and i keep receiving errors like

Uncaught SyntaxError: Unexpected token { 

This is my code below:

index.html

<script src="./vue.js"></script>
<!--<script src="./vuex.min.js"></script>-->

<div id="app">
  <counter></counter>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>
<script src="./example.js"></script>

example.js

import { mapState } from './vuex.min';

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

const Counter = {
  template: `<div>{{ count }}</div>`,
  /*computed: {
    count () {
      return this.$store.state.count
    }
  }*/
  computed:mapState({})

  /*
     I have inserted mapState this way

     though the example given is

     import { mapState } from 'vuex';

     export default {
        computed: mapState({
           //some codes here
        })
     }

  */

}

const app = new Vue({
  el: '#app',
  store,
  components: { Counter },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})

I am sure there must be mistake somewhere or yet to declare something to make it work that's the reason am seeking for help; i've tried many ways even install Vue devtool extension into chrome but couldn't start the devtool to enable me run the code in vue devtool.

Answer 1

You cannot ES6 export from compressed (production) builds. You need to export with Vuex.mapState()

Here is working example.

https://jsfiddle.net/exckyse3/