Javascript Vuex mapState未从Vuex导入视图

我试图通过从Vuex导入mapState，在Vue视图中使用mapState帮助器。请参阅下面的代码

TODO运动员档案{{userProfile}
注销
从“vuex”导入{mapstate}
//TODO运动员简介
导出默认值{
标题：“个人资料”，
方法：{
注销（）{
此.$store.dispatch（'注销'）
}
},
计算：{
…映射状态（['userProfile']）
}
}

但是，每次运行此代码时，我都会从ES Lint（运行命令

npm run serve

）收到以下警告：

然后，在浏览器中运行代码后，控制台中会出现以下错误（视图不会加载到DOM中）：

我正在运行以下版本的（相关）模块：

• vue@2.6.12
• vue-router@3.2.0
• vuex@3.4.0
• eslint@6.7.2
• eslint插件-vue@6.2.2

提前谢谢你！ 杰克

//第一次编辑：删除“此”
TODO运动员档案{{userProfile}
注销
//第二次编辑：“mapState”的拼写正确
从“vuex”导入{mapState}
//TODO运动员简介
导出默认值{
标题：“个人资料”，
//第三次编辑：将“计算”移到“方法”块之外
计算：{
…映射状态（['userProfile']）
},
方法：{
注销（）{
此.$store.dispatch（'注销'）
},
}
}

模板中不使用

this.

前缀。试试

{{userProfile}}

另外，你的问题是你把

computed

放在

方法里面了

blockThank@Phil我放错了片段。然而，这个问题仍然存在。我现在将编辑代码段。请用完整的错误消息/警告详细信息更新您的问题

WAIT  Compiling...                          11:57:12 AM

98% after emitting CopyPlugin

WARNING  Compiled with 1 warnings           11:57:12 AM

warning  in ./src/views/AthleteProfile.vue?vue&type=script&lang=js&

"export 'mapstate' was not found in 'vuex'

TypeError: Object(...) is not a function

<template>
  // First Edit: remove 'this'
  <div>TODO Athlete Profile {{ userProfile }}
    <b-button class="btn btn-danger" v-on:click="logout()">Logout</b-button>
  </div>
</template>

<script>
// Second edit: correct spelling of 'mapState'
import { mapState } from 'vuex'

// TODO Athlete profile
export default {
  title: 'Profile',
  // Third edit: move 'computed' outside of the 'methods' block
  computed: {
    ...mapState(['userProfile'])
  },
  methods: {
    logout() {
      this.$store.dispatch('logout')
    },
  }
}
</script>