NuxtJS的Vuex，$store为undefined的问题-BUG解决与吐槽

问题发生

尝试把公司官网项目改为Nuxt的ssr，在迁移vuex过程中，发现$store为undefined的问题。
基底文件layouts/index.vue里面有这段代码，结果输出为undefined 'store'

export default {
  name: 'BasicLayout',
  mounted () {
    console.log(this.$store, 'store')
  },
}

排查

1、只留下Nuxt官网的vuex简单模板代码，store/index.js文件。但是无效。

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

2、另外开一个纯净新项目，通过指令npx create-nuxt-app website_ssr3。直接启动后，使用vuex后，发现正常回显store对象。
3、开始对比两个项目的区别，通过对官网项目的代码删除，可以排除了是项目代码的问题， 那么可以明白，应该是项目某些配置出问题了。对比nuxt.config.js文件，没什么奇怪的。
4、删除node_modules包，重装库，结果照旧。
5、排查package.json，怀疑是因为官网项目引入的vuex导致的错误，与Nuxt自带的vuex冲突。
6、删除vuex库的引入，进行步骤4.（注意需要删除package-lock.json，由于我自己排查的时候，没注意，浪费了几分钟。）

结论

Nuxt自带的Vuex与package.json引入的Vuex会冲突，导致在项目里面，你使用的this.$store会报undefined。
所以遇到迁移项目会出现sotre为undefined的情况，可以看看是不是多引入了vuex。

吐槽

为什么网上没什么人遇到这个问题？百度了10多分钟，什么都没有。难道没有人在迁移项目的时候，会把package.json里面的引入也同时迁移嘛。头疼，排查这个问题快浪费了我1小时了。要是我实际解决问题的时候，也像文章一样那么清晰就好了。