vue3+ts+pinia 全局loading
时间: 2023-11-02 18:03:27 浏览: 139
Vue3中使用TypeScript结合Pinia来实现全局loading的方式如下:
首先,我们需要安装vue-router、pinia和axios,可以使用以下命令进行安装:
```
npm install vue-router@next pinia axios
```
接下来我们创建一个store模块来管理全局的loading状态。在src/store目录下创建一个名为loading.ts的文件,代码如下:
```typescript
import { store } from 'pinia';
export const useLoadingStore = store('loading');
export const loadingStore = useLoadingStore({
state: () => ({
isLoading: false,
}),
actions: {
setLoading(loading: boolean) {
this.isLoading = loading;
},
},
});
```
然后在src/main.ts文件中注册pinia和创建一个全局的loading插件,代码如下:
```typescript
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import axios from 'axios';
import { loadingStore } from './store/loading';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
// 创建全局loading插件
app.config.globalProperties.$loading = {
show() {
loadingStore.setLoading(true);
},
hide() {
loadingStore.setLoading(false);
},
};
// axios拦截器
axios.interceptors.request.use(function (config) {
loadingStore.setLoading(true);
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
loadingStore.setLoading(false);
return response;
}, function (error) {
loadingStore.setLoading(false);
return Promise.reject(error);
});
app.use(router);
app.mount('#app');
```
最后,在需要使用loading的地方,可以通过以下方式来调用全局的loading状态:
```typescript
import { defineComponent } from 'vue';
import { loadingStore } from './store/loading';
export default defineComponent({
methods: {
fetchData() {
loadingStore.setLoading(true);
// 发起异步请求
// ...
loadingStore.setLoading(false);
},
},
});
```
以上就是使用Vue3和TypeScript结合Pinia实现全局loading的方法。我们首先在store模块中定义了一个loading状态,并提供了相应的方法来控制loading的显示和隐藏。然后在main.ts中创建了全局的loading插件,并通过axios的拦截器来控制loading的显示和隐藏。最后,在需要使用loading的地方调用相应的方法即可。
阅读全文