vue3 组合式pinia的使用 案例

需求：用户登录时，结合session实现永久化存贮个人信息

import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
import { logOn } from '@/service'// sessionStorage的封装
import { SET_USER_TOKEN, STORAGE_GET, STORAGE_SET } from '@/utils/sessionStorage'
import { ILogOn } from '@/service/interface'
import router from '@/router'export default defineStore('customer', () => {const businessIf: any = ref({})// 用户登录的信息const businessInfo = computed(() => {const result = Object.keys(businessIf.value).length ? JSON.stringify(businessIf.value) : STORAGE_GET('customer-info')if (result) return JSON.parse(result)return {}})const login = async (userForm: ILogOn) => {// Loginconst customerLoginRes = await logOn(userForm)businessIf.value = customerLoginRes.payload.customer// 存用户信息STORAGE_SET('customer-info', JSON.stringify(customerLoginRes.payload.customer))// 存tokenSET_USER_TOKEN(customerLoginRes.payload.accessToken)// 取新的tokenSTORAGE_SET('refresh_token', customerLoginRes.payload.refreshToken)router.push('/')}const updateBusinessInfoValue = (newValue: any) => {businessIf.value = newValue;}return { businessInfo, login, businessIf, updateBusinessInfoValue }
})

组件中使用pinia

组件中修改pinia的值