vite+vue+ts集成pinia状态管理插件

当pinia在ts环境下运行时，如果未对一些必要的变量进行类型约束时可能会到编辑器报红提示，或者无法对代码做出相应的提示。按如下方法配置可以解决相关问题

1、入口main.ts

关键行：

import { createPinia } from 'pinia'

app.use(createPinia())

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

2、定义Store文件user.ts

关键行：

export interface UserStoreState {
  token: string
}
export interface UserStoreAction {
  removeToken(): void
  login(form: LoginForm): Promise<boolean>
}

export const useUserStore = defineStore<string, UserStoreState, {}, UserStoreAction>('user', {...})

import { defineStore } from 'pinia'
import { loginApi } from '@/api/users'

// 定义普通属性
export interface UserStoreState {
  token: string
}
// 定义操作方法
export interface UserStoreAction {
  removeToken(): void
  login(form: LoginForm): Promise<boolean>
}

export interface LoginForm {
  name: string,
  password: string
}

// 定义store传入对应的ts类型，其中第三参数{}为getter的数据类型
export const useUserStore = defineStore<string, UserStoreState, {}, UserStoreAction>('user', {
  state() {
    return {
      token: ''
    }
  },
  actions: {
    async login (form: LoginForm) {
      try {
        const { data } = await loginApi(form)
        this.token = data.data
        return true
      } catch (error){
        this.token = ''
        return false
      }
    },
    removeToken() {
      this.token = ''
    }
  }
})

3、在组件中使用store

// 引入相关依赖
import { useUserStore } from '@/stores/user'
import type { UserStoreAction, UserStoreState } from '@/stores/user'
import type { Store } from 'pinia'

// 获取store
const userStore: Store<string, UserStoreState, {}, UserStoreAction> = useUserStore()


// 获取store属性
const token = userStore.token

// 调用store方法
const loginAction = async () => {
  // ...
  if (!valid) return
  const isSuccess = await userStore.login(formData)
  if (isSuccess) {
    await router.push('/')
  }
  // ...
}

4、在非组件中使用store，例如请求封装axios请求的文件中

// 引入相关依赖
import axios from 'axios'
import { useUserStore } from '@/stores/user'
import type { UserStoreState, UserStoreAction } from '@/stores/user'
import type { Store } from 'pinia'


// 获取store对象 此处只是定义了未赋值，因为此处代码执行的时候可能store还未初始化完成
let userStore: Store<string, UserStoreState, {}, UserStoreAction>
/* 请求拦截器*/
request.interceptors.request.use((config) => {
  const { url } = config
  const ssoLoginUrl = '/users/login'
  // 如果store对象不存在需要在次数获取下store对象（页面加载的时候useUserStore()方法只能执行一次，后边的请求userStore就已经存在了）
  if (!userStore) userStore = useUserStore()
  // 获取store对象中的属性
  const { token } = userStore
  if (ssoLoginUrl !== url && token) {
    config.headers.Authorization = token
  }
  return config
})