如何 map state 返回 Vue.js AWS Amplify auth 页面中的组件

Question

I am building an authentication page with Vue.js, Vuex, and AWS Amplify.

This auth page is based off Erik Hanchett's AWS Auth Example ( https://github.com/ErikCH/Aws-auth-example/blob/master/src/components/HelloWorld.vue ). Erik's original demo utilized Vuex for state management, but for the sake of simplicity only employs the state handler in the store.js file.

I am attempting to reconfigure this demo so that the various methods and hooks in HelloWorld.vue are set up to also dispatch actions and commit mutations.

So far, I have been successful in setting up the findUser() method in HelloWorld.vue to dispatch actions, pass user and signedIn as payloads to their respective action handlers, and then commit mutations.

However, my issue now pertains to the computed property in the HelloWorld component.

Erik's original demo returns the state directly to the component using return this.$store.state.signedIn as seen in the computed property. Based on my experience with Vuex in other projects, I would normally use a mapState helper to map directly to the state.

Is it correct in this project to use this.$store.state.signedIn to return the state? Or should I use mapState ? If so, how can I reconfigure this computed property in order to employ mapState to map directly to signedIn ?

My code is below:

HelloWorld.vue

<template>
  <div class="hello">
    <div v-if="!signedIn">
      <amplify-authenticator></amplify-authenticator>
    </div>
    <div v-if="signedIn">
      <Home></Home>
    </div>
  </div>
</template>

<script>
import { Auth } from 'aws-amplify'
import { AmplifyEventBus } from 'aws-amplify-vue';
import { mapState } from 'vuex'
import Home from '../components/Home.vue'
export default {
  name: 'HelloWorld',
  components: {
    Home
  },
  data() {
    return {
      login: '',
      password: ''
    }
  },
  props: {
    msg: String,
  },
  created(){
    this.findUser();
    AmplifyEventBus.$on('authState', info => {
      if(info === "signedIn") {
        this.findUser();
      } else {
        this.$store.state.signedIn = false;
        this.$store.state.user = null;
      }
    });
  },
  computed: {
    signedIn(){
      return this.$store.state.signedIn;
    }
  },
  methods: {
    async findUser() {
      try {
        const user = await Auth.currentAuthenticatedUser();
        let signedIn = true
        this.$store.dispatch('setUser', user)
        this.$store.dispatch('setSignedIn', signedIn)
      }
      catch(err) {
        let signedIn = false
        this.$store.dispatch('setSignedIn', signedIn)
      }
    }
  }
}
</script>

Store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    signedIn: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setSignedIn(state, signedIn) {
      state.signedIn = signedIn
    }
  },
  actions: {
    setUser: (context, user) => {
      context.commit('setUser', user)
    },
    setSignedIn: (context, signedIn) => {
      context.commit('setSignedIn', signedIn)
    }
  }
})

Home.vue

<template>
  <div class="goodbye">
    <h1>HOME</h1><br>
      <amplify-sign-out></amplify-sign-out>
  </div>
</template>

<script>
import { Auth } from 'aws-amplify'
export default {
  name: 'Home',
  data() {
    return {
      login: '',
      password: ''
    }
  },
  props: {
    msg: String,
  },
  methods: {
    signOut() {
      Auth.signOut()
    }
  }
}
</script>

Answer 1

The mapState helper is just sugar syntax for not repeating multiple times the whole this.$store.state.foo piece of code.

You can certainly use mapState like this

import { mapState } from 'vuex'

computed: mapState([
  // map this.signedIn to this.$store.state.signedIn
  'signedIn'
])

Or like this if you want to also use local properties besides the ones of mapState

import { mapState } from 'vuex'

computed: 
   localComputed () { /* ... */ },
   ...mapState([
   // map this.signedIn to this.$store.state.signedIn
     'signedIn'
   ])

Here are the docs for more information on this.