Call vuex store without mapState

Question

So I'm experimenting with a new project created with vue cli, where I am using router and VueX

So in my HelloWorld.vue file, I've got this code in the script section:

import { mapState } from 'vuex'

export default {
  name: 'hello',
   computed: mapState({
    msg: 'nombre'
  }),

Is there a more direct way of calling values in the state?, like for example I would like to do

msg: store.nombre

My vuex store is defined in the root main.js like this:

//vuex
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    nombre: "POS vuex"
  }  
});

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

Answer 1

Actually I was looking for this way:

msg: this.$store.state.nombre

(I was missing the ".state." part)

Answer 2

As soon as you're using mapState as computed you can actually call these states with this in that component - in the template or script section:

Use the ... operator on your mapState and you're done:

Example:

Your store:

const store = new Vuex.Store({
  state: {
    nombre: "POS vuex",
    otherState: "abc",
    anotherState: "efg"
  }  
});

Your component:

<template>
  <div id="test">
    {{ nombre }}
    {{ otherState }}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'hello',
   methods: {
     logState() {
       console.log(this.anotherState);
     }
   },
   computed: {
     ...mapState(["nombre", "otherState", "anotherState"]),
   }
}
</script>