添加Vuex后Vue.js应用无法编译，请求技术协助

先别急，咱们先把眼前的命令错误解决掉，再一步步排查Vuex的问题。

一、搞定'vue-cli-service'未被识别的报错 #

这个错误大概率是项目依赖没装全或者缓存出问题了，按下面的步骤来：

• 第一步：安装项目依赖
  你应该还没安装项目的node_modules依赖吧？先在项目根目录的PowerShell里执行：

  yarn install
  

  等依赖装完再跑yarn serve试试，大部分情况这一步就能解决问题。

• 如果依赖已经装过，试试清理重装
  有时候依赖缓存会搞事情，执行下面的命令清掉旧依赖再重装：

  # 删除node_modules文件夹
  Remove-Item -Recurse -Force node_modules
  # 删除yarn.lock锁文件
  Remove-Item yarn.lock
  # 重新安装依赖
  yarn install
  

• 检查本地是否有vue-cli-service依赖
  打开项目的package.json，看看devDependencies里有没有@vue/cli-service，如果没有的话，手动装一下：

  yarn add @vue/cli-service --dev
  

二、Vuex集成的潜在问题排查 #

解决完命令错误后，咱们再看看你Vuex的代码，有几个小细节得注意：

• main.js里store的引入路径错了
  你写的import store from 'store.js'是绝对路径的写法，应该用相对路径（假设store.js和main.js在同一个文件夹里）：

  import store from './store.js'
  

  路径不对的话，项目跑起来后会找不到store实例，Vuex根本没法工作。

• mutations是空的，后续没法修改state
  Vuex规定必须通过mutations修改state，你现在的store.js里mutations是空对象，建议先加个简单的mutation测试：

  mutations: {
    increment(state) {
      state.count++
    }
  }
  

  之后在组件里用this.$store.commit('increment')就能测试Vuex是否正常了。

• 组件里测试Vuex的小例子
  比如在你的ProductListView里加个按钮和计数显示，验证Vuex是否生效：

  <template>
    <div>
      <p>当前计数：{{ $store.state.count }}</p>
      <button @click="$store.commit('increment')">点我加1</button>
    </div>
  </template>
  

内容的提问来源于stack exchange，提问作者Jacob Bruce