Question

我遇到了Axios的问题在Vuex中使用Header - VueJS，希望你们帮助我。

页数：

<template>
<div class="temp">{{users.info}}</div>
</template>

<script>
data: function () {
    return {
      config: {
        'headers': {'Authorization': 'JWT ' + this.$store.state.token}
      }
    }
  },
fetch ({ store, params }) {
    return store.dispatch('getProfile', params, this.config)
  },
</script>

Vuex Modules：

import api from '~/plugins/axios'

const state = () => {
  return {
    info: null
  }
}

const actions = {
  getProfile ({commit}, params, config) {
    return new Promise((resolve, reject) => {
      api.get(`/users/${params.username}/`, config)
      .then(response => {
        commit('GET_USER_DETAIL', response.data)
        resolve(response.data)
      },
      response => {
        reject(response.data)
      })
    })
  }
}
const getters = {}

const mutations = {
  GET_USER_DETAIL (state, info) {
    state.info = info
  }
}

export default {
  state,
  actions,
  getters,
  mutations
}

问题：未定义Vuex模块中的配置。

我认为我错了什么希望得到你的帮助。提前谢谢！

Answer 1

Vuex中的操作不能包含多个参数。将你的参数组合成一个对象，如下所示：

return store.dispatch('getProfile', { params: params, config: this.config })

然后从您的行动中访问：

getProfile ({commit}, obj) {
  var params = obj.params
  var config = obj.config
  /* ... */
}

如果你看一下docs中的Dis Disching Actions部分，它会显示传递params的正确方法。

Axios在Vuex中使用Header - NUXTJS

1 个答案: