javascript - 如何将状态映射回Vue.js AWS Amplify Auth页面中的组件

我正在使用Vue.js，Vuex和AWS Amplify构建身份验证页面。

该身份验证页面基于Erik Hanchett的AWS Auth示例（https://github.com/ErikCH/Aws-auth-example/blob/master/src/components/HelloWorld.vue）。 Erik的原始演示使用Vuex进行状态管理，但为简单起见，仅在store.js文件中使用state处理程序。

我正在尝试重新配置此演示，以便在HelloWorld.vue中设置各种方法和挂钩以分派动作和提交突变。

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

但是，我的问题现在与computed组件中的HelloWorld属性有关。

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

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

我的代码如下：

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

主场

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

最佳答案

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'
   ])

这是docs的更多信息。