开发者问题收集

从 axios 获取存储在 vuex 中的 response.data 未定义

2019-09-29
1005

在 vue 组件中获取 response.data console.log(this.$store.getters.getData) 的未定义值。

但是,我能够使用此语句 console.log(resp.data) 获取 response.data

我在成功突变中尝试过 console.log(data) ,但它仍然返回未定义值。

login.vue

    login: function() {
        let data = this.$store
          .dispatch("login", data)
          .then((resp) => {
            console.log(resp.data);  -> it returned data
            console.log(this.$store.getters.getData);  -> it returned undefined

            }
          })
          .catch(err => {});
      }

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import qs from 'qs'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    data: {},
  },
  mutations: {
    success(state, token, data) {
      state.status = 'success'
      state.token = token
      Vue.set(state, 'data', data)
    }
  },
  actions: {
    login({ commit }, data) {
      return new Promise((resolve, reject) => {
        axios.post(url, qs.stringify(data))
          .then(resp => {
            commit('success', resp.data.token, resp.data)
            resolve(resp)
          })
          .catch((error) => {
            commit('error')
            reject(error)
          })
      })
    },
  getters: {
    getData: state => state.data,
  }
})

console.log(resp.data); -> 它返回了数据 console.log(this.$store.getters.getData); -> 它返回了未定义值

2个回答

最后我弄清楚了为什么它返回了 undefined,因为该突变仅接受名为 state 和 payload 的两个参数,因此不会传递其他参数。

参考 - 无法向 Vue store 中的突变发送第二个参数

LI HO TAN
2019-10-03

尝试在突变成功时使用 Vue.set(state,'data',data) 代替写入 state.data = data;

2019-09-29