vue.js - Axios 在 Vuex 中获取 Header - NUXTJS

Question

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

页数：

<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
  /* ... */
}

如果您查看文档中的 Dispatching Actions 部分，它会显示传递参数的正确方法。