Axios 在 Vuex 中使用 Header 获取 - NUXTJS

Question

我在 Vuex - VueJS 中使用 Header 获取 Axios 时遇到问题，希望你们能帮助我。

页数：

<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 模块：

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 中的调度操作部分，它显示了传递参数的正确方法。

Axios 在 Vuex 中使用 Header 获取 - NUXTJS

Axios Get with Header in Vuex - NUXTJS

vue.js

axios

vuex

nuxt.js

vuex-modules