[Vue 警告]：渲染错误：“TypeError: undefined is not an object (evalating 'this.$store.state')”

Posted 2023-02-22

【中文标题】[Vue 警告]：渲染错误：“TypeError: undefined is not an object (evalating \'this.$store.state\')”

【英文标题】：[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.$store.state')"[Vue 警告]：渲染错误：“TypeError: undefined is not an object (evalating 'this.$store.state')”

【发布时间】：2018-10-27 13:24:05

【问题描述】：

当我使用 vuex 项目运行 vue 时出现以下错误。

[Vue 警告]：渲染错误：“TypeError: undefined is not an object (evalating 'this.$store.state')”

在我的项目中，我创建了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:

从'./vuex/store.js'导入存储

...
new Vue(
  el: '#app',
  router,
  store,
  render: h => h(App)
);
...

在我的 app.vue 中：

<template>
  <div>
    <registration></registration>
    <hr>
    <registrations></registrations>
  </div>
</template>

<script>

  import registration from './views/components/registrations/registration.vue'
  import registrations from './views/components/registrations/registrations.vue'

  export default
    props: 

    ,
    data()
      return 
      
    ,
    components: 
      registration,
      registrations
    
  
</script>

在我的registration.vue 中，我使用了this.$store.state.user_data 和this.$store.state.is_login，错误就在那里报告：

<style scoped>

</style>

<template>
  <div style="margin-top: 20px">
    <h1>registration</h1>
     is_login 
    <hr>
     user_data 

  </div>
</template>

<script>

  export default
    data()
      return 
        msg: 'hello vue'
      
    ,
    computed: 
      is_login()
        debugger
        return this.$store.state.is_login
      ,
      user_data()
        return this.$store.state.user_data
      
    ,
    components: 
  
</script>

我在Vue中注册了store，为什么还会出现这个问题？

【参考方案1】：

在 main.js 中更改

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

到

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

【讨论】：

或在您的商店 js 中更改 export const store = new Vuex.Store 以导出默认的新 Vuex.Store 并从 './vuex/store.js' 导入商店 ;)