vue3中使用pinia

store下index文件

// @ts-ignore
import { defineStore } from 'pinia'
import { login } from '~/services/api'

export interface IUserInfo {
  userInfo: {
    accountNo: string | null
    accountType: string | null
    deactivated: string | null
    email: string | null
    emailAlias: string | null
    mobile: string | null
    name: string | null
    primaryAccountNo: string | null
    userId: string | null
    userNameAlias:string | null
  }
}

const state = (): IUserInfo => ({
  userInfo: {
    accountNo: null,
    accountType: null,
    deactivated: null,
    email: null,
    emailAlias: null,
    mobile: null,
    name: null,
    primaryAccountNo: null,
    userId: null,
    userNameAlias: null,
  },
})

const actions = {
  LOGIN() {
    return new Promise((resolve, reject) => {
      const ticket = new URLSearchParams(window.location.search).get('ticket')
      const service = window.location.origin
      login({ service, ticket })
        .then((res: any) => {
          window.location.replace(service)
          resolve(res)
        })
        .catch((e: any) => {
          reject(e)
        })
    })
  },
}

const userStoreModule = defineStore({
  id: 'user',
  state,
  actions,
})

export default userStoreModule

使用

import userStoreModule from '~/store/index.ts'
import { storeToRefs } from 'pinia'
const useStore = userStoreModule()
const { userInfo } = storeToRefs(useStore)
getUserInfo().then(res => {
      useStore.$patch({
        userInfo: res,
      })
    })

模块化使用
store下新建modules 再新建user.ts 内容同上
store下index文件

import userStoreModule from './modules/user'

const useStore = () => ({
  user: userStoreModule(),
})
export default useStore

使用

import useStore from '~/store'
const { user } = useStore() as any
const userInfo = computed(() => user.userInfo)
getUserInfo().then(res => {
      user.$patch({
         userInfo: res,
      })
    })