Javascript Vuex的未捕获语法错误和标识符

我正在学习Vuex，但在运行mapState时遇到了挑战，我认为MapGetter和MapTranslations也会带来同样的挑战

我正在非节点环境中的xampp localhost中运行代码，并且不断收到如下错误

Uncaught SyntaxError: Unexpected token { 

下面是我的代码：

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')
    }
  }
})

从“/vuex.min”导入{mapState}；
const store=新的Vuex.store({
声明：{
计数：0
},
突变：{
增量：state=>state.count++，
减量：state=>state.count--
}
})
常数计数器={
模板：`{count}}`，
/*计算：{
计数（）{
返回此项。$store.state.count
}
}*/
已计算：mapState（{}）
/*
我用这种方式插入了mapState
虽然给出的例子是
从“vuex”导入{mapState}；
导出默认值{
计算：mapState({
//这里有一些代码
})
}
*/
}
const app=新的Vue({
el:“#应用程序”，
商店，
组件：{Counter}，
方法：{
增量（）{
store.commit（'increment'）
},
减量{
store.commit（‘减量’）
}
}
})

---

我确信一定有什么地方出错了，或者为了使它正常工作而声明了什么，这就是我寻求帮助的原因；我尝试了很多方法，甚至在chrome中安装了Vue devtool扩展，但无法启动devtool以使我能够在Vue devtool中运行代码。

您无法从压缩（生产）版本中导出ES6。您需要使用

Vuex.mapState（）导出

下面是一个工作示例

问题来自
import{mapState}from./vuex.min'。web浏览器不支持此语法。通常，JS框架是使用webpack/browserify等构建工具开发的，这样开发人员就可以利用NPMJ的所有模块。尝试搜索vue cli并改用它。谢谢，我将很快使用vue cli，仍在学习webpack