Vuex mapState未从Vuex导入视图

Question

我试图通过从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

谢谢你的进阶！杰克

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