Vue3 + Pinia 状态管理，从入门到模块化

一枚前端小姐姐2026-02-25 18:28

前言

Pinia 是 Vue3 标配状态管理。简单、轻量、易用。

一、创建 Store

javascript 复制代码

// store/modules/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),

  actions: {
    setToken(token) {
      this.token = token
    },
    setUserInfo(info) {
      this.userInfo = info
    }
  }
})

二、在组件中使用

xml 复制代码

<script setup>
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

// 获取数据
console.log(userStore.token)

// 修改数据
userStore.setToken('xxxx')
</script>

三、Getters 计算

yaml 复制代码

getters: {
  isLogin: (state) => !!state.token
}

四、数据持久化（常用）

安装插件：

复制代码

npm install pinia-plugin-persistedstate

在 store 中启用：

arduino 复制代码

export const useUserStore = defineStore('user', {
  // ...
  persist: true
})

数据自动存在 localStorage。

五、模块化最佳实践

store/modules/xxx.js 按业务拆分
命名：useXxxStore
页面直接引入使用