在axios之后将信息从Vuex模块传递到组件

// store.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    setUserInfo(state, payload) {
      state.userInfo = payload
    }
  }
})

export default store

// MyComponent.vue

<template>
  <div>
    <p>{{ userInfo }}</p>
    <button @click="fetchUserInfo">Fetch User Info</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import axios from 'axios'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    fetchUserInfo() {
      axios.get('/api/user')
        .then(response => {
          this.setUserInfo(response.data)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>