已注册Vuex Store仍报错：this.$store.state未定义，求排查

报错信息 #

[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.$store.state')"

你已经在根Vue实例里注册了store，但还是碰到这个问题，我帮你梳理几个最可能的原因和解决办法：

1. 首先检查Store的导出与导入是否匹配 #

你的vuex/store.js里用的是命名导出：

import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export const store = new Vuex.Store({ 
  state:{ 
    user_data: null, 
    is_login: false 
  } 
}); 

但main.js里用的是默认导入：

import store from './vuex/store.js'

这会导致导入的store是undefined——默认导出和命名导出不匹配，根实例根本没拿到有效的store实例，子组件自然找不到this.$store。

解决办法二选一：

• 改store.js为默认导出：

  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  // 用export default替代export const store
  export default new Vuex.Store({
    state:{
      user_data: null,
      is_login: false
    }
  });
  

• 或者改main.js的导入方式为命名导入：

  // 用大括号指定导入命名导出的store
  import { store } from './vuex/store.js'
  

2. 检查计算属性的写法是否用了箭头函数 #

如果你的registration.vue里计算属性用了箭头函数，会导致this不指向当前Vue组件实例，自然找不到$store：

错误写法：

computed: {
  isLogin: () => {
    // 箭头函数的this继承自父级上下文，不是Vue实例
    return this.$store.state.is_login
  }
}

正确写法（用普通函数）：

computed: {
  isLogin() {
    return this.$store.state.is_login
  }
}

3. 确认组件是否被正确挂载 #

如果registration组件不是通过Vue的组件系统挂载的（比如直接用new Registration()手动实例化），它不会继承根实例的store，也会出现this.$store未定义的情况。

确保你是通过组件标签（比如<registration></registration>）或者路由配置的方式引入组件，而非手动实例化。

4. 检查是否在实例初始化前访问了this.$store #

比如在组件的data选项里直接依赖store：

data() {
  return {
    loginStatus: this.$store.state.is_login // 组件未完全初始化，可能拿不到$store
  }
}

这种情况建议把这类依赖store的变量放到计算属性里，而非data中。

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