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（运行ning 命令 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>

Vuex mapState 未从 Vuex 导入视图

Vuex mapState not importing into view from Vuex

javascript

eslint

vue.js

vuex

vuejs2