我有一个Vue.js 3项目,我想在一些.vue组件和pinia商店中使用全局axios示例。
我的main.js文件全局配置了axios,如下所示
const axiosInstance = axios.create({
baseURL: "http://localhost:8000/",
headers: {
"Content-Type": "application/json"
}
});
const app = createApp(App);
app.config.globalProperties.$http = axiosInstance;
const pinia = createPinia();
app.use(pinia);
//other code...
在.vue组件中,我可以通过$http
执行axios,就像这样。
methods: {
async debug() {
const response = await this.$http.get("get-dates");
console.log(response.data);
}
}
但是当我尝试在pinia存储中使用this.$http
时,它是未定义的。我还注意到所有全局变量,如$route,都是未定义的。
export const useDateStore = defineStore("dateStore", {
state: () => ({
allowedDates: []
}),
actions: {
async fetchAvailableDates() {
//how I normally use axios
const response = await axios.get("http://localhost:8000/get-dates");
//how I want to use axios
const response2 = await this.$http.get("get-dates");
console.log(this.$http); //gives undefined
}
});
1条答案
按热度按时间bprjcwpo1#
使用Pinia,您无法访问全局属性。但可以使用use()传递
您将需要更改pinia代码并添加上下文
在main.js上传递属性,像这样:
你想用就用