Axios 在 Vuex 中获取 Header - NUXTJS答案

【问题标题】：Axios Get with Header in Vuex - NUXTJSAxios 在 Vuex 中获取 Header - NUXTJS
【发布时间】：2023-03-26 04:18:01
【问题描述】：

我在 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 模块中的配置未定义。

我认为我有问题希望您的帮助。提前致谢！

【问题讨论】：

标签： vue.js axios vuex nuxt.js vuex-modules

【解决方案1】：

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

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

然后像这样从您的操作中访问：

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

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

【讨论】：