因为Pinia使用起来真的很方便，所以将自己的项目升级为Pinia,体验一下。

本方法是一个比较原始的方法，将使用Vuex的地方，改成Pinia使用形式，所以适用于项目中轻度使用vuex， 如果项目中大量使用Vuex不建议使用该方法，会有机械式重复操作。

1. 卸载

npm uninstall vuex
npm cache clean --force

2. 安装pinia

npm install pinia

3. main.ts引入

将原来Vuex的注册使用删除，并引入Pinia.

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

4. 修改store文件夹下文件

举个栗子： 不再需要index.js主文件来整体导出。

修改前：

import { loginApi } from "@/api/user/user";
import { LoginParm, LoginResult } from "@/api/user/UserModel"; import { Result } from "@/http/request";
import { ActionContext } from "vuex";
import { RootState } from "../index";
import { setToken,setUserId,setExpireTime } from '@/utils/auth'; //定义state类型
export type UserState = {
    token:string,
    userId:string
}
//定义state
export const state : UserState = {
  token:'',
  userId:'' }
  //定义mutations
  export const mutations = {
      setToken(state:UserState,token:string){
          state.token = token;
      },
      setUserId(state:UserState,userId:string){
          state.userId = userId;
      }
  }
  //定义actios
export const actions = {
  login({commit}:ActionContext<UserState,RootState>,loginParm:LoginParm){
      return new Promise<Result>((resolve,reject)=>{
          loginApi(loginParm).then(res=>{
              if(res.data.code == 200){
//设置到vuex中 commit('setToken',res.data.token) commit('setUserId',res.data.id) //存储到sessionStorage setToken(res.data.token) setUserId(res.data.id) setExpireTime(res.data.expireTime)
}
              resolve(res)
          }).catch(error=>{
              reject(error)
}) })
  }
}

//定义getters
export const getters = {
  getToken(state:UserState){
      return state.token
} }
export default{
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}

修改后：

import { defineStore } from "pinia"
import { loginApi } from "@/api/user/user"
import { LoginParm, LoginResult } from "@/api/user/UserModel"
import { Result } from "@/http/request"

export type UserState = {
  token: string
  userId: string
}
export const useUserStore = defineStore("userStore", {
  state: (): UserState => {
    return {
      token: "",
      userId: "",
    }
  },
  actions: {
    setToken(token: string) {
      this.token = token
    },
    setUserId(userId: string) {
      this.userId = userId
    },
    login(loginParm: LoginParm) {
      return new Promise<Result>((resolve, reject) => {
        loginApi(loginParm)
          .then((res) => {
            if (res.data.code == 200) {
              //设置到vuex中 commit('setToken',res.data.token) commit('setUserId',res.data.id)
              //存储到sessionStorage setToken(res.data.token) setUserId(res.data.id) setExpireTime(res.data.expireTime)
            }
            resolve(res)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
  },
  getters: {
    getToken(state: UserState) {
      return state.token
    },
  },
})

5. 修改使用store中数据的地方

举个栗子: 这个栗子是修改使用getters里的数据，其他actions也是同理，在使用位置只需要点一下，就能提示出来这个store里的所有数据和方法，用起来很方便。 修改前：

<script lang="ts" setup>
import { computed } from "vue"
import { useStore } from "@/store/index"

const store = useStore()
const isCollapse = computed(() => {
  return store.getters["menu/getCollapse"]
})
</script>

修改后：

<script lang="ts" setup>
import { computed } from "vue"
import { useMenuStore } from "@/store/menu"

const menuStore = useMenuStore()
const isCollapse = computed(() => {
  return menuStore.getCollapse
})
</script>