pinia使用过程中遇到的问题和疑问

1、pinia初始化为空

使用pinia时，如果仓库中state一开始存储的数据为空，那么我们直接使用仓库数据则会报错导致页面刷新为空。可以通过可选链运算符?.解决

使用案例

import { defineStore } from "pinia";
import { reqHospitalDetail } from "@/api/hospital";
let useDetailStore = defineStore("detail", {
  state: () => {
    return {
      hospitalInfo: {},
    };
  },
  actions: {
    async getHospital(hoscode: string) {
      let res = await reqHospitalDetail(hoscode);
      if (res.code === 200) {
        this.hospitalInfo = res.data;
      }
    },
  },
  getters: {},
});
export default useDetailStore;

在页面中使用

<template>
    <div class="title">{{ hosname }}</div>
</template>

<script setup>
import { computed } from 'vue'
import useDetailStore from "@/store/modules/hospitalDetail.ts"
let detailStore = useDetailStore()
let hosname = computed(() => {
    return detailStore.hospitalInfo.hospital?.hosname
})
</script>

hospitalInfo.hospital?.hosname注意是在第一个没有的属性的属性前才用?.

当然我们可以在仓库的state的hospitalInfo对象中预先配置上我们需要的属性，值为空，这样直接用也不会保存

2、pinia解构数据保持响应式

共有两种方式：1、使用计算属性。2、使用storeToRefs将state中变量解构出来使用

使用计算属性

上面初始化为空中已经使用到了计算属性

storeToRefs

<template>
    <div class="title">{{ hosname }}</div>
</template>

<script setup>
import { computed } from 'vue'
import useDetailStore from "@/store/modules/hospitalDetail.ts"
import { storeToRefs } from 'pinia';
let detailStore = useDetailStore()
let {hosname}=storeToRefs(detailStore )
</script>

这种方式使用时不要带.value。并且解构出来只用于读值，也就是不要直接给解构出来的变量赋值

如果需要对仓库中state的变量进行修改。第一种可以通过在actions中的方法去操作state的变量。第二种仓库.state的变量=我们要赋的值

3.本地持久化存储

// 用户相关的仓库
import { defineStore } from "pinia";
import { reqUserLogin } from "@/api/hospital/index.ts";

const useUserStore = defineStore("User", {
  state: () => {
    return {
      // 组件刚加载时，本地可能没有存储过用户信息，那么要给一个空对象
      // 当我们刷新页面时，如果已经登录了直接从本地读取，
      // 如果没有登录，就通过登录触发登录事件userLogin去获取用户信息
      userInfo: JSON.parse(localStorage.getItem("USERINFO")) || {},
    };
  },
  actions: {
    // 用户登录
    async userLogin(loginParams) {
      let res: any = await reqUserLogin(loginParams);
      console.log("用户登录", res);
      if (res.code == 200) {
        this.userInfo = res.data;
        // 本地存储持久化存储用户信息
        localStorage.setItem("USERINFO", JSON.stringify(this.userInfo));
        return "ok";
      } else {
        return Promise.reject(new Error(res.message));
      }
    },
  },
  getters: {},
});
export default useUserStore;

说明userInfo为什么给空对象，因为空对象.属性返回undefined，如果不给空对象那就是null.属性，null无法读取属性直接报错