Pinia 踩坑之路

前言

最近在搞vue3+Ts+Pinia的项目，遇到的一些问题再次记录一下

1、pinia在setup语法下中使用$reset()报错的解决方法

直接在pinia挂载时，重写一个$reset方法用来解决失效的问题。

installPinia.ts
import { createPinia } from "pinia";
import type { App } from 'vue'
const installPinia = (app:App<Element>) => {
  const pinia = createPinia();
  pinia.use(({store})=>{
    const initialState = JSON.parse(JSON.stringify(store.$state));
    store.$reset = ()=>{
      store.$state = JSON.parse(JSON.stringify(initialState));
    }
  })
  app.use(pinia)
}

export default installPinia

main.ts
import installPinia from "./utils/installPinia"
installPinia(app);

2、storeToRefs

如果想要获取store对象中的某一个值且该值具有响应性，可以使用storeToRefs

import { useLoginStore } from '../../stores/login'
const store = useLoginStore()
const { isLogin} = storeToRefs(store)