boschchina-wechat-crm/store

Pinia 状态管理使用说明

目录结构

store/
├── index.js              # Pinia 实例
├── README.md             # 使用说明
└── modules/              # 状态模块
    ├── user.js           # 用户状态
    └── ...               # 其他模块

使用方式

1. 在组件中使用

<script setup>
import { useUserStore } from '@/store/modules/user.js'
import { storeToRefs } from 'pinia'

// 方式一：直接使用（推荐用于修改数据）
const userStore = useUserStore()

// 方式二：使用 storeToRefs（推荐用于读取，保持响应式）
const { token, userInfo, isLoggedIn } = storeToRefs(userStore)

// 调用方法
userStore.loginSuccess({ token: 'xxx', userInfo: {...} })
userStore.logout()
</script>

2. 在 JS 文件中使用

import { useUserStore } from '@/store/modules/user.js'
import { createPinia } from 'pinia'

// 注意：在非组件中使用时，需要确保 pinia 已初始化
const userStore = useUserStore()

内置模块

user.js - 用户状态

状态：

• token - 登录令牌
• userInfo - 用户信息对象

计算属性：

• isLoggedIn - 是否已登录
• userName - 用户名
• userAvatar - 用户头像

方法：

• setToken(token) - 设置 token
• setUserInfo(info) - 设置用户信息
• loginSuccess(data) - 登录成功处理
• logout() - 退出登录
• updateUserInfo(info) - 更新用户信息

创建新模块

在 store/modules/ 目录下创建新文件：

// store/modules/todo.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTodoStore = defineStore('todo', () => {
  // 状态
  const list = ref([])
  
  // 方法
  const addTodo = (item) => {
    list.value.push(item)
  }
  
  return {
    list,
    addTodo
  }
})

注意事项

1. 数据持久化：当前使用 uni.setStorageSync 手动持久化重要数据
2. 小程序兼容性：Pinia 已兼容微信小程序
3. 响应式：所有状态都是响应式的，组件会自动更新

迁移指南

从 utils/userCache.js 迁移到 Pinia：

之前：

import { getUserInfo, isLogin } from '@/utils/userCache.js'
const info = getUserInfo()

现在：

import { useUserStore } from '@/store/modules/user.js'
const userStore = useUserStore()
const info = userStore.userInfo