Vue3 hooks实战必备！

一、前言

众所周知，Vue 2中的mixin和Vue 3中的hooks是两种不同的组件复用方式。但这两者有一定的区别，Vue 2中的mixin是一种将一组选项合并到组件中的方式，可以在多个组件中共享相同的逻辑和选项。但是mixin的使用会导致命名冲突和组件间的依赖关系不清晰。而Vue 3中的hooks是一种更加灵活和可组合的方式来复用组件逻辑。通过使用hooks，可以将组件的状态和生命周期逻辑拆分为独立的函数，使得逻辑更加清晰和可复用。同时，hooks的使用也避免了命名冲突和依赖关系不清晰的问题。总的来说，Vue 3的hooks比Vue 2的mixin更加灵活、可组合和易于维护。它提供了一种更好的组件复用方式，使得组件的逻辑更加清晰和可读性更高。

Vue 3的hooks是从React中的hooks概念得到启发，并在Vue 3版本中引入的。Vue 3的hooks提供了一种新的组件编写方式，使得组件的逻辑可以更加清晰和可复用。通过使用hooks，可以在函数式组件中使用状态、生命周期钩子等功能，以更加灵活和简洁的方式编写Vue组件。

对于逻辑抽离和全局共享，都会想到使用vuex和pinia这两种工具，但是有了Vue3的hooks的写法，基本上项目就无需使用这两种工具了。

二、案例

利用一个简单的登录案例，使用Vue3 hooks的写法将其代码封装。登录信息一般会有账号、密码和后端返回的token（这里使用JWT登录方式），主要的业务有设置用户信息、登录操作、登出操作、设置token信息。我们现在先创建一个useUserStore.ts文件，其主要暴露一个函数（因为函数有相对独立的作用域，这和组件是一个函数是同个道理），供页面逻辑复用。写法非常类似vuex或pinia，主要代码如下：

import { ref } from "vue";
import router from "@/router";

export interface IUser {
  account?: string
  password?: string
}

export interface IState {
  info: IUser
  token: string
}

const state = ref<IState>({
  info: {
    account: '',
    password: ''
  },
  token: ''
})

export function useUserStore() {

  /**
   * 设置用户信息
   */
  const setUserInfo = (info: IUser): void => {
    state.value.info = info
  }

  /**
   * 设置token
   */
  const setToken = (token: string) => {
    state.value.token = token
  }

  /**
   * 用户登录
   */
  const login = () => {
    // TODO:登录逻辑
    console.log(state.value.info);
    router.push('/home')
  }

  /**
   * 登出
   */
  const logout = () => {
    // TODO:登出逻辑
  }

  return {
    state,
    setUserInfo,
    setToken,
    login,
    logout
  }
}

我们在一个页面上进行测试，输入账号密码，点击登录，跳转到路径为/home的页面。

<div>
  <label for="account">账号</label>
  {{ state.userInfo }}
  <input v-model="state.info.account" type="text" name="" id="account" class=" outline-none border-[1px] borde-[#999] border-solid">
  <label for="password">密码</label>
  <input v-model="state.info.password" type="password" name="" id="password"
    class="border-[1px] borde-[999] border-solid outline-none ">
  <button @click="login" class="ml-10 border-[1px] borde-[999] border-solid py-1 px-2">登录</button>
</div>

<p>------------------------------------------------------------------------------</p>

<div v-if="route.path !== '/'">
  <RouterView></RouterView>
</div>

import { useUserStore } from '@/store/user/useUserStore'
import { useRoute } from 'vue-router';

const route = useRoute()

const {
  state,
  login,
} = useUserStore()

可以看到调用的时候非常方便，我们在home.vue页面打印用户登录信息，当输入验证数据是否可全局共享。

<div>
  <p>用户信息：{{ state.info }}</p>
</div>

import { useUserStore } from '@/store/user/useUserStore';
const {state} = useUserStore()

在页面上可以显示用户信息，但在现实登录时，用户信息应具有时效性，所以需要跟缓存进行结合。以上就是一个通过使用Vue3 hooks简单封装的案例，希望对你有所帮助！

欢迎关注公众号—代码分享站