Pinia 的常用方法

VUE3 非组合式

import { useTabStore } from "@/pinia/store"
import {mapState,mapActions} from "pinia"

  methods: {
   ...mapActions(useProfileStore,{
      LoginByUsername:"LoginByUsername"
    })  
  },

  computed:{
    ...mapState(
      useTabStore,{
        tabs : 'tabs',
        activePath : 'activePath'
      }
    ),
    systemInfo(){
      return "version 1"
    }
  },

组合式API

// app.ts
import { ref, computed,toRefs } from 'vue'
import { defineStore } from 'pinia'

export const useAppStatStore = defineStore('appstat', () => {

    const viewLg = computed(()=>{
        return winWidth.value > 1280 
    })


    return {
        viewLg 
    }
})

// 应用
import { ref, computed, toRefs } from 'vue'
import { useAppStatStore } from '@/store/app'

const useAppStat = useAppStatStore()
const { viewLg } = toRefs(useAppStat)

仓库创建

import { defineStore } from 'pinia'
import { ref, computed,toRefs } from 'vue'

export const mainStore = defineStore('mainPinia', () => {

    let loginUser = ref(null) as any ;

    return {
      loginUser
    }
}

Ref:
https://zhuanlan.zhihu.com/p/533233367
持久化：
https://www.jb51.net/article/249783.htm