vue3+ts+axios+pinia实现无感刷新方式

让我来为你详细讲解“vue3+ts+axios+pinia实现无感刷新方式”的完整攻略。

什么是无感刷新？

“无感刷新”又称为“局部刷新”，是指在不需要刷新整个页面的情况下，只刷新某个局部区域的内容。这种方式可以提升用户体验，避免因整个页面刷新而导致的卡顿和等待。

准备工作

在开始实现无感刷新之前，需要准备好以下工具和依赖：

Vue3：一个流行的JavaScript框架，用于构建用户界面。
TypeScript：一个强类型的JavaScript扩展，可以提供更好的代码提示和类型检查。
Axios：一个流行的HTTP请求库，用于在Vue中进行网络请求。
Pinia：一个流行的状态管理库，可以让Vue组件使用Vuex-like的语法来管理状态。

以及一些你喜欢的编辑器，如VS Code。

步骤

下面是实现无感刷新的步骤：

安装依赖

首先我们需要安装Vue3、TypeScript、Axios和Pinia：

npm install vue@next vue-router@next @vue/compiler-sfc typescript @types/node @types/vue @types/vue-router axios pinia

引入插件

在Vue的入口文件main.ts中，我们需要引入一些插件。这里我们先引入Vue、Axios和Pinia，以及一个用于处理跨域请求的插件：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
import { createPinia } from 'pinia';
import { setupAxios } from './axios';
import router from './router';

const app = createApp(App);
const pinia = createPinia();
app.use(router).use(pinia).mount('#app');
setupAxios(axios);

在这段代码中，我们通过createApp来创建Vue应用实例，接着使用use来安装路由和状态管理插件，最后使用mount来把Vue应用实例挂载到页面中。

编写Pinia状态管理

在完成插件引入之后，我们可以开始编写Pinia状态管理了。在这个例子中，我们通过定义一个store来管理我们的用户列表：

import { State, Getters, Mutations, Actions } from 'pinia';

export interface User {
  id: number;
  name: string;
  age: number;
}

export interface UsersStoreState {
  users: User[];
}

export const useUsersStore = defineStore('users', {
  state: (): UsersStoreState => ({
    users: [],
  }),

  getters: {
    getUsers(): User[] {
      return this.users;
    },
  } as Getters<UsersStoreState>,

  mutations: {
    setUsers(users: User[]) {
      this.users = users;
    },
  } as Mutations<UsersStoreState>,

  actions: {
    async loadUsers() {
      const { data } = await axios.get<User[]>('/api/users');
      this.setUsers(data);
    },
  } as Actions<UsersStoreState>,
});

在这段代码中，我们首先定义了一个User接口类型，然后定义了一个UsersStoreState接口类型，用于描述我们的状态管理结构。

接着我们通过defineStore来定义一个名为users的状态管理模块，定义了一个state用于描述我们用户列表的状态，一个getters用于获取用户列表，一个mutation用于设置用户列表，并最后一个action用于加载用户列表。

编写路由和组件

在编写完状态管理之后，我们还需要定义一个路由和一个组件，用于展示用户列表：

import { createRouter, createWebHistory } from 'vue-router';
import Users from './views/Users.vue';

const routes = [
  {
    path: '/',
    name: 'Users',
    component: Users,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在这段代码中，我们定义了一个名为router的路由，其中包含了一个path为/的路由，指向一个名为Users的组件。

而在这个组件中，我们将使用Pinia状态管理来加载并展示用户列表：

<template>
  <div>
    <h3>Users:</h3>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.age }})
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useUsersStore } from '../store';

export default defineComponent({
  setup() {
    const usersStore = useUsersStore();
    usersStore.loadUsers();

    return {
      users: usersStore.getUsers,
    };
  },
});
</script>

在这段代码中，我们从Pinia状态管理中获取了useUsersStore，并调用loadUsers来加载用户列表，然后通过getUsers获取到了用户列表，并在组件模板中使用v-for将其展示出来。

添加无感刷新

在完成路由和组件的编写后，我们需要添加无感刷新的功能。在这个例子中，我们将使用Axios来发送网络请求，从而达到无感刷新的效果。

首先，我们定义一个axios.ts文件，用于为我们的Axios实例配置一些通用设置：

import axios from 'axios';

export function setupAxios(axiosInstance: typeof axios) {
  axiosInstance.defaults.baseURL = 'https://api.example.com';
  axiosInstance.defaults.headers.post['Content-Type'] = 'application/json';
  axiosInstance.interceptors.response.use(
    (response) => {
      if (response.status >= 200 && response.status < 300) {
        return response.data;
      }
      return Promise.reject(new Error(response.statusText));
    },
    (error) => {
      return Promise.reject(error);
    }
  );
}

在这段代码中，我们首先为Axios实例设置了一个默认的baseURL，接着设置了post请求的Content-Type为application/json，最后通过interceptors.response来拦截请求返回的结果，并在status码正确的情况下返回结果数据，并在出现错误的情况下抛出一个错误。

接着，在我们的组件中，需要添加一个loadMore方法来加载更多用户列表。这里我们通过增加一个基于页码的offset，来达到分页的效果：

<template>
  <div>
    <h3>Users:</h3>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.age }})
      </li>
    </ul>
    <button @click="loadMore">Load more</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useUsersStore } from '../store';
import { axios } from '../axios';

export default defineComponent({
  setup() {
    const usersStore = useUsersStore();

    async function loadMore() {
      const offset = usersStore.getUsers.length;
      const { data } = await axios.get<User[]>('/api/users', { params: { offset } });
      usersStore.setUsers([...usersStore.getUsers, ...data]);
    }

    return {
      users: usersStore.getUsers,
      loadMore,
    };
  },
});
</script>

在这段代码中，我们首先使用useUsersStore来获取到我们的状态管理模块，并定义了一个名为loadMore的方法。这个方法通过获取到当前用户列表长度来计算出基于页码的offset，并通过Axios向后端请求更多用户列表数据。我们将这些数据和原来的用户列表数据合并，最后通过setUsers来设置新的用户列表。

最后，在这个例子中我们演示了如何在Vue3中使用了TypeScript、Axios和Pinia来实现了无感刷新的列表。