Vuex mapState not importing into view from Vuex

Question

I am trying to use the mapState helper in a Vue view by importing mapState from Vuex. Please see below code

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

However, every time I run this code I get the following warning from ES Lint (running command 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'

And then, once I run the code in the browser, I get the following error in the console (the view does not load in the DOM):

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

I am running the following versions of (relevant) modules:

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

Thank you in advanced! Jack

You don't use the this. prefix in your templates. Try {{ userProfile }} — Phil
Also, your issue is that you've put computed inside the methods block — Phil
Thanks @Phil I put in the wrong snippet. However, the issue still stands. I will edit snippet now. — Jack Miller
Please also update your question with the full error message / warning details — Phil

snsakib snsakib · Accepted Answer · 2020-11-23T01:30:05

<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 not importing into view from Vuex

1 Answers