如何在Vue.js AWS放大auth页面中将状态映射回组件

Question

我正在构建一个使用Vue.js、Vuex和AWS放大器的身份验证页面。

这个auth页面是基于Erik的Auth示例(https://github.com/ErikCH/Aws-auth-example/blob/master/src/components/HelloWorld.vue)。Erik最初的演示使用Vuex进行状态管理，但为了简单起见，只在store.js文件中使用了store.js处理程序。

我正在尝试重新配置这个演示，以便设置HelloWorld.vue中的各种方法和钩子，以同时分派操作和提交突变。

到目前为止，我已经成功地在HelloWorld.vue中设置了HelloWorld.vue方法，以分派操作，将user和signedIn作为有效负载传递给各自的action处理程序，然后提交突变。

但是，我的问题现在涉及到HelloWorld组件中的HelloWorld属性。

Erik的原始演示使用return this.$store.state.signedIn将状态直接返回给组件，如computed属性中所示。根据我在其他项目中使用Vuex的经验，我通常会使用mapState助手直接映射到状态。

在此项目中使用this.$store.state.signedIn返回状态正确吗？还是我应该使用mapState？如果是这样的话，我如何重新配置这个computed属性以便使用mapState直接映射到signedIn？

我的代码如下：

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

mapState助手只是用于避免多次重复整个this.$store.state.foo代码的语法。

您当然可以像这样使用mapState

import { mapState } from 'vuex'

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

或者像这样，如果您想使用本地属性(除了mapState属性之外)

import { mapState } from 'vuex'

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

以下是有关此问题的更多信息，请参见文档。