Vuex mapState 未从 Vuex 导入视图答案

【问题标题】：Vuex mapState not importing into view from VuexVuex mapState 未从 Vuex 导入视图
【发布时间】：2021-03-05 18:06:03
【问题描述】：

我正在尝试通过从 Vuex 导入 mapState 在 Vue 视图中使用 mapState 助手。请看下面的代码

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

<script>
import { mapstate } from 'vuex'

// TODO Athlete profile
export default {
  title: 'Profile',
  methods: {
    logout() {
      this.$store.dispatch('logout')
    }
  },
  computed: {
    ...mapstate(['userProfile'])
  }
}
</script>

但是，每次我运行此代码时，我都会从 ES Lint 收到以下警告（运行命令 npm run serve）：

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'

然后，一旦我在浏览器中运行代码，我会在控制台中收到以下错误（视图未在 DOM 中加载）：

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

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

vue@2.6.12
vue-router@3.2.0
vuex@3.4.0
eslint@6.7.2
eslint-plugin-vue@6.2.2

提前谢谢你！杰克

【问题讨论】：

您没有在模板中使用this. 前缀。试试{{ userProfile }}
另外，您的问题是您已将 computed 放入 methods 块中
谢谢@Phil 我输入了错误的 sn-p。但是，问题仍然存在。我现在将编辑 sn-p。
请同时更新您的问题，提供完整的错误消息/警告详细信息

标签： javascript vue.js vuejs2 vuex eslint

【解决方案1】：

<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>

【讨论】：