Leer el State - Tylung/vue-apuntes GitHub Wiki

Archivo: src/components/counter-vuex.vue

<template>
    <h1> Counter - Vuex 👾 </h1>
    <h2> Direct access: {{ $store.state.count }} </h2>
    <h2> Computed: {{ countComputed }} </h2>

    <h1>mapState</h1>
    <h2>mapState: {{ count }} </h2>
    <!-- <h3>lastMutation: {{ lastMutation }}</h3> -->
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        countComputed() {
            return this.$store.state.count
        },
        ...mapState(['count'])
        // ...mapState({
        //     count: state => state.count,
        //     lastMutation: state => state.lastMutation
        //     // para renombrar
        // })
    }
}
</script>

3 maneras de leer el state de vuex:

  1. Directamente en el template <h2> Direct access: {{ $store.state.count }} </h2>
  2. En una propiedad computada:
countComputed() {
            return this.$store.state.count
 }
  1. Con el mapState:
 ...mapState(['count'])

El mapState es una funcion que regresa como se encuentra el estado de vuex, por lo que le pasamos como parametro lo que queremos sacar del state. En este caso el count

y se hace la importacion en el App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Counter />
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
  name: 'App',
  components: {
      Counter: defineAsyncComponent(() => import('./components/counter-vuex.vue'))
  }
}
</script>
⚠️ **GitHub.com Fallback** ⚠️