在单独的 axios 模板 js 文件中访问 vuex 状态
Access vuex state in separate axios template js file
我有问题。我有一个 Vuex 状态。我也在提出 axios 请求。我已经为带有预定义 header 的模板 axios 请求创建了一个单独的文件。它看起来像这样:
import axios from 'axios'
import store from '../store/index'
export default axios.create({
baseURL: 'https://k-3soft.com/',
timeout: 1000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${store.getters.getToken}`
}
})
问题是在这种情况下存储在未定义中。那么如何将我的 vuex 存储导入到这个 /src/axios/request.js 文件中呢?
我也试过 import { store } from '../store/index'
。
我的商店是这样的:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
namespaced: true,
modules: {
user
},
state: {
url: 'https://icfprod.k-3soft.com/',
token: '',
},
getters: {
getToken: state => state.token
},
})
也可以由任何人共享以查看任何存储库,其中有带模块的 Vuex、带单独预定义模板的文件的 axios。只是想看看如何组织我的项目结构。谢谢大家的帮助。
使用工厂函数创建 axios 实例。
// request.js
import axios from 'axios'
const createAxiosInstance = (token) => {
return axios.create({
baseURL: 'https://k-3soft.com/',
timeout: 1000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}
})
export default createAxiosInstance
然后在像这样的模块中使用它:
// user.js
import createAxiosInstance from '../request.js'
const userModule = {
// ...
actions: {
async doSomeAction ({ state, commit, rootState }) {
const axios = createAxiosInstance(rootState.token)
const response = await axios.post('/some/api/endpoint')
.then(response => response)
.catch(error => {
// handle error
})
commit('SOME_MUTATION', response.data)
}
}
}
我有问题。我有一个 Vuex 状态。我也在提出 axios 请求。我已经为带有预定义 header 的模板 axios 请求创建了一个单独的文件。它看起来像这样:
import axios from 'axios'
import store from '../store/index'
export default axios.create({
baseURL: 'https://k-3soft.com/',
timeout: 1000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${store.getters.getToken}`
}
})
问题是在这种情况下存储在未定义中。那么如何将我的 vuex 存储导入到这个 /src/axios/request.js 文件中呢?
我也试过 import { store } from '../store/index'
。
我的商店是这样的:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
namespaced: true,
modules: {
user
},
state: {
url: 'https://icfprod.k-3soft.com/',
token: '',
},
getters: {
getToken: state => state.token
},
})
也可以由任何人共享以查看任何存储库,其中有带模块的 Vuex、带单独预定义模板的文件的 axios。只是想看看如何组织我的项目结构。谢谢大家的帮助。
使用工厂函数创建 axios 实例。
// request.js
import axios from 'axios'
const createAxiosInstance = (token) => {
return axios.create({
baseURL: 'https://k-3soft.com/',
timeout: 1000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
}
})
export default createAxiosInstance
然后在像这样的模块中使用它:
// user.js
import createAxiosInstance from '../request.js'
const userModule = {
// ...
actions: {
async doSomeAction ({ state, commit, rootState }) {
const axios = createAxiosInstance(rootState.token)
const response = await axios.post('/some/api/endpoint')
.then(response => response)
.catch(error => {
// handle error
})
commit('SOME_MUTATION', response.data)
}
}
}