vue3中使用pinia总结

第一步 安装

npm i pinia

然后在main.ts中引入

import { createPinia } from "pinia";
 const pinia=createPinia()
 app.use(pinia)
 //这里省去了其它代码

pinia持久化存储（可选）

1. npm i pinia-plugin-persist
2. 在main.js中插入

import piniaPersist from 'pinia-plugin-persist'
pinia.use(piniaPersist)
//这里的代码衔接到上面的main.js代码中

3. 在对应仓库文件代码中加入

 persist: {
        enabled: true
    }

定义store

我们可以创建一个store文件夹，在里面新建文件'index.ts'，然后文件中的代码如下

import { defineStore } from 'pinia'
import { classList } from '@/api/category'
import useTabStore from './tab'
interface cateState {
    cateList: Array<cateType>
}
interface cateType {
    id:number|string
    name:string
}
const useCateStore = defineStore('cate', {
    state(): cateState {
        return {
            cateList: [],
        }
    },
    getters: {
         getCateList(state) {
            return state.cateList
        },
    },
    actions: {
        changeTo(cate?:cateType|string){
            if(!cate){
                 const tabStore=useTabStore()
                 console.log(tabStore.tabname)
            }
            
        },
       getList() {
         
            return new Promise((resolve, reject) => {
                classList({}).then(res => {
                    if (res.data) {
                        resolve(res.data)
                    }
                })
            })


        }
    },
    persist: {
        enabled: true
    }
})

export default useCateStore

用法详解

1. 定义state，也可以是 state:()=>({ username:'' }),，使用ts可以像上面的代码那样写。
2. action中，可以定义异步，也可以是普通的函数，可以在里面通过使用this.username来访问state中的数据
3. 可以在里面使用其它store的数据，建议不要交叉导入
4. 在router.ts等文件中使用，导入import useCateStore from "@/store/cate"; ,然后建议在router.beforeEach函数中使用 const cateStore=useCateStore()，再接着使用其中的变量，因为在router.ts其它地方使用的话，main.ts里面的代码还没执行，此时使用store会报错

修改state，以及在vue文件中使用pinia

import { storeToRefs } from 'pinia'
import useCateStore from "@/store/cate";
const cateStore = useCateStore()
const { cateList } = storeToRefs(cateStore)
console.log(cateList.value)

其中，storeToRefs是可选的，也可以通过cateStore.cateList直接访问state中的数据，action中的方法可以直接调用，如cateStore.getList()

更多使用方法，建议参考官网，这篇文章只是记录了在一个项目里可能经常要用的方法