我遇到了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模块:
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模块中的config。
我想错了什么希望你的帮助。提前致谢!
Vuex中的操作不能包含多个参数。将params分组为单个对象,如下所示:
return store.dispatch('getProfile', { params: params, config: this.config })
然后从您的操作中访问,如下所示:
getProfile ({commit}, obj) {
var params = obj.params
var config = obj.config
/* ... */
}
如果你查看docs中的Dispatching Actions部分,它会显示传递params的正确方法。