ifanrx 工具库

Appearance

用户状态管理 - useUserStore ​

useUserStore是基于pinia实现的，旨在简化用户状态的全局管理，并集成了 0AA 登录以及工会会员状态的管理。

在项目中必须使用该方法维护全局用户状态，以确保风格的一致性。

TIP

0AA 登录以及会员相关状态仅适用于粤工惠相关项目，普通商务项目只需通过 useUserStore 维护全局用户状态

初始化 ​

接入 0AA 登录 ​

js
import {onLaunch, onShow} from '@dcloudio/uni-app'
import {useUserStore} from '@ifanrx/uni-mp'
import {noop} from 'licia'

import {BAAS_DEV, BAAS_QA} from '@/constants'

const userStore = useUserStore()

onLaunch(() => {
  userStore.init({useDevelopZAA: BAAS_DEV || BAAS_QA})
})

onShow(options => {
  // 监听应用打开时是否存在 0AA Token，进行用户数据同步
  userStore.watchZAAEnterOptions(options).catch(noop)
})

不接入 0AA 登录 ​

js
import {onLaunch} from '@dcloudio/uni-app'
import {useUserStore} from '@ifanrx/uni-mp'
import {noop} from 'licia'

const userStore = useUserStore()

onLaunch(() => {
  userStore.init({enableZAA: false})
})

使用 Store 的正确姿势 ​

经观察，同学们在开发时有一个习惯：逢对象必套一层 storeToRefs 来解构。

询问理由，得到的答复是：为了响应式。

在此需要声明，不用 storeToRefs 也可以响应式，pinia 实例本身就是一个 reactive 对象，因此：

响应式不等于必须要 storeToRefs，需要结合根据场景使用，禁止 storeToRefs 一锅端

我们的规范是，对于一些用户状态，它的主体就是 userStore，因此不应该被解构，

对于 user 对象，可以被解构，下面具体来说明。

用户状态管理 ​

在 userStore 中有一系列用户相关的状态，包括不限于：登录状态、实名状态、工会审核状态等。

对于这一系列状态，我们更推荐不解构使用：

js
import {useUserStore} from '@ifanrx/uni-mp'

const userStore = useUserStore()

userStore.isLoggedIn
userStore.unverified
userStore.verifiedAndJoinedTradeUnion

// 需要解构会丢失响应式
const {isLoggedIn} = userStore

解构使用 user ​

对于 user 对象，可以使用 storeToRefs 进行解构使用。

vue
<script setup>
import {storeToRefs} from 'pinia'
import {useUserStore} from '@ifanrx/uni-mp'

const userStore = useUserStore()
const {user} = storeToRefs(userStore)

// 当用户登录成功后再进行数据获取
const {data} = io.useQuery(() => io.xxx.find(), {
  enabled: computed(() => user.value?.id),
})
</script>

<template>
  <image :src="user.avatar" />
  <view>{{ user.nickname }}</view>
</template>

需要注意的是，在自定义 composition api 时，若需要使用响应式的 userStore，需要在 composition api 内使用 storeToRefs，请勿在代码顶部使用，否则会丢失其响应式

如果确实不需要用到响应式的 userStore，请不要使用 storeToRefs，正常解构即可

js
import {storeToRefs} from 'pinia'
import {useUserStore} from '@ifanrx/uni-mp'

const userStore = useUserStore()
const {user} = storeToRefs(userStore) // ❌ 错误，这样拿到的 user 不是响应式的

export default function useCompositionApi() {
  const {user} = storeToRefs(userStore) // ✅ 正确，在该 composition api 内可以获取响应式的 user
  // something...
}

相关文档 ​