当前位置：首页 > article >正文

Vue3 pinia的基本使用

article 2024/11/20 23:39:18

pinia的使用跟vuex很像，去除了很多没用的api，写法有两种，一种老式的选项式api还有一种组合式api，用哪种根据自己喜好来，以下示例为组合式api

更多教程参考官网：pinia官网https://pinia.vuejs.org/zh/

安装

npm install pinia

配置

import { createPinia } from 'pinia';
import persisted from "pinia-plugin-persistedstate";//持久化插件
import App from './App.vue'
const pinia = createPinia();
const app = createApp(App)
app.use(pinia.use(persisted));//使用pinia以及pinia持久化插件

新建store文件夹=>index.js

引入defineStore方法穿件一个store，主要接收三个参数

参数一：store的唯一key值

参数二：数据存储区以及方法，

参数三：持久化配置（将数据放缓存持久保存）

import {
    defineStore
} from "pinia"
import {
    ref
} from "vue"

// 首页属性
export const usehomeStore = defineStore('storeKey', () => {
    let menuState = ref(false)//菜单展开状态
    const testData = ref('测试');

    function changeMenuStateFn() {
        menuState.value = !menuState.value
    }
    return {
        menuState,
        testData,
        changeMenuStateFn,
    }
},
{
    persist:{
        enabled:true,//是否开启持久化，对象形式不写默认为开启
        key:'menuShowState',//存储时候的key值，默认为defineStore的key
        storage:"sessionStorage",//存储类型，默认localStorage
        paths:['menuState'],//需要持久化的数据，默认全部
        serializer:{
            deserialize:()=>{
                console.log('ooo');
            },
            serialize:()=>{
                console.log('ppp');
            },
        },//序列化方法,默认为JSON.parse与JSON.stringify
        beforeRestore: (ctx) => {
            console.log(`即将恢复 '${ctx.store.$id}'`)
        },
        afterRestore: (ctx) => {
            console.log(`刚刚恢复完 '${ctx.store.$id}'`)
        },
    }
}
)

页面使用：

使用的时候记得使用一下，因为向外暴露的是一个方法，所以需要调用一下才能获取到值，因为在store里面已经使用ref响应过了所以无需用ref定义，直接在页面使用即是响应式数据，

注意：此处尽量不要解构，解构会丢失响应式，如果一定要解构请使用storeToRefs,

此方法需要从pinia中导入，

使用示例：示例来自官网

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

import {usehomeStore,usePublic} from "@/store/index.js"
const homeStore = usehomeStore();
const publicStore = usePublic();
<el-aside class="aside" :width="homeStore.menuState?'60px':'200px'">

查看全文

http://www.kler.cn/a/158459.html