Vuex组件中this.$store为undefined及状态不同步问题求助

我之前开发Vue项目时也碰到过一模一样的情况，大概率是初始化顺序或者配置细节出了问题，下面给你一步步排查和解决的方法：

1. 检查Vue Router与Vuex的初始化顺序 #

这是最常见的原因：如果先创建router，再创建store，那么当router初始化时，Vue实例还没有注入store，导致App.vue（尤其是包含<router-view>的情况下）无法获取到this.$store。

正确的顺序应该是：

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from './App.vue'

// 先安装插件
Vue.use(Vuex)
Vue.use(VueRouter)

// 1. 先创建store实例
const store = new Vuex.Store({
  state: {
    // 你的状态定义
  },
  mutations: {
    // 你的mutations
  }
})

// 2. 再创建router实例（确保router能感知到全局store）
const router = new VueRouter({
  routes: [
    // 你的路由配置
  ]
})

// 3. 最后创建Vue实例，同时传入store和router
new Vue({
  store, // 注入全局store
  router,
  render: h => h(App)
}).$mount('#app')

2. 确认App.vue的挂载方式是否正确 #

如果你的router配置里把App.vue当成了路由组件（比如{ path: '/', component: App }），那router会重新实例化App.vue，这个新实例就无法获取到全局注入的store了。

正确的结构应该是：

• App.vue作为根组件，内部包含<router-view>来渲染路由页面
• router的routes配置里只放具体的页面组件

示例App.vue：

<template>
  <div id="app">
    <!-- 路由组件会在这里渲染 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    // 现在这里应该能正常拿到this.$store了
    console.log(this.$store)
  }
}
</script>

3. 确保Vuex插件已正确安装 #

一定要在创建store实例之前调用Vue.use(Vuex)，否则Vue不会把$store挂载到组件原型上，自然无法通过this.$store访问。

4. 解决多store实例的问题（后续拆分到store/index.js） #

要避免导入时生成新实例，你需要在单独的文件里导出单例store，所有地方都导入这个单例：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 直接导出创建好的store实例（单例）
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

然后在main.js里导入这个单例：

// main.js
import store from './store'
// ...
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

如果组件里需要直接使用store（不通过this.$store），也导入同一个单例：

// App.vue
import store from './store'

export default {
  methods: {
    addCount() {
      // 这里的store和main.js里的是同一个实例，状态会同步
      store.commit('increment')
    }
  }
}

按照上面的步骤调整后，App.vue里的this.$store应该就能正常访问，且状态也能同步了。

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