非Node环境下Vuex mapState报错求助：Uncaught SyntaxError

看起来你遇到的核心问题是在非Node/构建工具的环境下错误使用了ES模块的import语法，同时Vuex的引入方式也不对，导致浏览器无法解析代码，抛出了Unexpected token {的错误。下面一步步帮你解决：

问题根源 #

1. 你在普通的浏览器环境（XAMPP本地运行，无Webpack/Vite等构建工具）中使用了import { mapState } from './vuex.min';，但浏览器默认不会解析import语法（除非你把script标签设置为type="module"，但Vuex的UMD版本本来就是全局变量，不需要这么做）。
2. 你注释了Vuex的script引入，导致全局的Vuex对象不存在，后续new Vuex.Store也会报错。

修正后的完整代码 #

index.html #

<script src="./vue.js"></script>
<!-- 必须取消注释这行，引入Vuex的UMD版本，它会在全局挂载Vuex对象 -->
<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语句，直接使用全局的Vuex对象
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

const Counter = {
  template: `<div>{{ count }}</div>`,
  // 使用全局的Vuex.mapState，并且要映射需要的状态（空对象不会生效）
  computed: Vuex.mapState({
    // 写法1：箭头函数
    count: state => state.count,
    // 写法2：简写（如果属性名和state中的字段名一致）
    // count: 'count'
  })
}

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

关键细节说明 #

• 全局环境下的Vuex工具函数使用：当你直接通过script标签引入Vuex时，所有的辅助函数（mapState/mapGetters/mapMutations等）都挂载在全局的Vuex对象上，不需要用import导入，直接用Vuex.mapState即可。
• mapState的正确用法：你之前写的mapState({})是空对象，不会映射任何状态到组件的computed中，所以需要添加你需要的状态映射，比如上面的count: state => state.count，这样组件才能拿到this.count对应store中的count值。
• 关于ES模块的误区：如果一定要用import，你需要把script标签设置为type="module"，同时确保Vuex的文件是ES模块版本，但在非构建环境下，直接用全局变量的方式更简单，也不容易出错。

Vue Devtools的问题 #

之前Devtools无法启动是因为代码报错导致Vue实例没有正常初始化，修正代码后，只要Vue实例正常运行，Devtools应该就能检测到你的应用了。

内容的提问来源于stack exchange，提问作者amachree tamunoemi