uniapp vue3 使用pinia存储 并获取数据

存token 

import { defineStore } from 'pinia';
 
export const userInfo = defineStore('userInfo', {
  state: () => {
    return {
      userToken: uni.getStorageSync('token') || '',
    };
  },
  actions: {
    // 添加token
    updateToken(token: string) {
      uni.setStorageSync('token', token);
      this.userToken = token
    }
  }
});

使用

 import {
    userInfo
  } from '@/stores/userInfo'
  import {
    ref
  } from "vue";
  const test = userInfo()
  const tst = ref('4')
  test.updateToken(tst.value)

效果

这边存 用户信息

定义store 文件

import { defineStore } from 'pinia'
 
interface Member {
    userInfo : AnyObject | null
}
 
const useMemberStore = defineStore('member', {
    state: () : Member => {
        return {
            userInfo: uni.getStorageSync('userInfo') || null
        }
    },
    actions: {
        updateUserInfo(userInfo : AnyObject) {
            uni.setStorageSync('userInfo', userInfo)
            this.userInfo = userInfo
        }
    }
})
 
export default useMemberStore

 vue页面 存储数据

import useMemberStore from '@/stores/member'
 
 const user = useMemberStore()
 
 user.updateUserInfo('存对象的数据')   

取数据

方法一

弊端 没有初始值 控制台提示报错

在template中 使用 userInfo.member_id

 import { storeToRefs } from 'pinia'
    
 import useMemberStore from '@/stores/member'    
 
 const info = useMemberStore()
 
 const { userInfo } = storeToRefs(info)
 
 console.log(userInfo.value.member_id, '从缓存中取数据');

打印下 userInfo 

方式二 

给 默认值 即使userInfo无值也不会报错

template中 直接 {{member_id}} 使用
 
 import useMemberStore from '@/stores/member'
 import { ref, computed } from "vue";
 
 const memberStore = useMemberStore()
    const userInfo : any = computed(() => memberStore.userInfo)
    const member_id = ref(0)
    const is_mechanic = ref(0)
    if (userInfo.value) {
        member_id.value = userInfo.value.member_id
        is_mechanic.value = userInfo.value.is_mechanic
    }