vue3 pinia的安装和使用

Pinia最初是在 2019 年 11 月左右重新设计使用Composition API的 Vue Store 外观的实验。从那时起，最初的原则仍然相同，但 Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合 API。Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，Pinia 2 是对应 Vue3 的版本

// 安装

npm i -S pinia

还需再安装个数据持久化插件

npm i -S pinia-plugin-persist 

 

使用

1、在src下创建store文件夹，并在其内创建index.js文件，文件内容如下

import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"

const store = createPinia()
store.use(piniaPluginPersist)

export default store

接着在main.js中引入

import store from "./store";

const app = createApp(App);

app.use(store)

2、在store目录下创建一个新的js文件，比如info.js，写入以下内容（建议通过 actions 去修改 state，action 里可以直接通过 this 访问）

import { defineStore } from "pinia"

export const userStore = defineStore({
    id: "info", // id是唯一的，如果有多个文件，ID不能重复
    state: () => {
        return {
            userinfo: null,
            bank_type: 1, 
        }
    },
    actions: {
        setInfo(data) {
            this.userinfo = data
        },
        setBankType(data) {
            this.bank_type = data
        },
        // 用户退出，清除本地数据
        logout() {
            this.userinfo = null
            sessionStorage.clear()
            localStorage.clear()
        },
    },
    // 开启数据缓存，在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage
    // 默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化，如：paths: ['userinfo'] 替换key的位置
    persist: {
        enabled: true,
        strategies: [
            {
                key: "users",
                storage: localStorage,
            },
        ],
    },
})

3、页面使用

<script setup>
import { getCurrentInstance, ref } from "vue"
import { userStore } from "@store/info" // 引用js，路径根据你们对应配置好的路径填写
const store = userStore()

function getinfo() {
    proxy.$axios
        .get("", {})
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data

                // 调用info.js的actions中的setInfo方法
                // 跟vuex有所差别，vuex是store.commit 或 store.dispatch，pinia是省去了“.commit/.dispatch”步骤

                store.setInfo(result) 
            } else {
                Toast(res.data.msg)
            }
        })
        .catch((err) => {})
}

</script>

4、只要触发了actions中的方法就会按照上述配置好的persist缓存

自己记录一下

参考资料：新一代状态管理工具，Pinia.js 上手指南-技术圈