Vue3+Pinia状态管理完全指南

前言

Pinia是Vue3推荐的状态管理库,比Vuex更简洁。

一、定义Store

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  actions: {
    async login(username, password) {
      const res = await api.post('/auth/login', {username, password})
      this.token = res.data.token
    },
    logout() { this.token = ''; this.name = '' }
  },
  persist: true  // 持久化
})

二、在组件中使用

<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>
<template>
  <div v-if="userStore.token">已登录</div>
  <button @click="userStore.login(user, pass)">登录</button>
</template>

总结

Pinia简洁高效,是Vue3状态管理首选。如需服务,欢迎联系17老师。

关于17老师:AI应用·数字化管理·全栈开发·网络安全全栈专家。邮箱:j.d88888888@qq.com 微信:AFIST17