【pinia状态管理配置】

安装

pnpm add pinia

main.ts引入

// createPinia() 函数调用创建了一个新的 Pinia 实例。
// 这个实例是状态管理的核心，它将管理应用中所有的 store。
import { createPinia } from 'pinia'
app.use(createPinia())

自定义user仓库

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

// 定义并导出 User Store
// 仓库名user
export const useUserStore = defineStore('user', () => {
  // 状态
  const userInfo = ref<{ name: string; password: string } | null>(null) // 用户信息
  // !! 用于将一个值强制转换为布尔值 得到原始值的布尔表示
  const isLoggedIn = computed(() => !!userInfo.value) // 登录状态

  // Actions
  /**
   * 登录
   * @param name - 用户名
   * @param password - 用户密码
   */
  function login(name: string, password: string) {
    userInfo.value = { name, password }
    localStorage.setItem('user', JSON.stringify(userInfo.value)) // 持久化到 localStorage
  }

  /**
   * 登出
   */
  function logout() {
    userInfo.value = null
    localStorage.removeItem('user') // 清除 localStorage
  }

  /**
   * 初始化用户状态（从 localStorage 中恢复）
   */
  function initialize() {
    const storedUser = localStorage.getItem('user')
    if (storedUser) {
      userInfo.value = JSON.parse(storedUser)
    }
  }

  // 返回状态和方法
  return {
    userInfo,
    isLoggedIn,
    login,
    logout,
    initialize,
  }
})

使用自定义仓库

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUserStore } from '@/stores/user';
import { onMounted } from 'vue';

const userStore = useUserStore();
const { userInfo, isLoggedIn, login, logout, initialize } = userStore;

// 初始化用户状态
onMounted(() => {
  initialize();
});
const loginForms = ref()
const loginForm = reactive({
  username: 'admin',
  password: '123456',
})

const loginDialogVisible = ref(true)

const loginAction = async () => {
  console.log('登录按钮被按下' + JSON.stringify(loginForm))

}
</script>