Vue3的pinia使用及持久化存储

最新推荐文章于 2025-05-01 21:31:07 发布

慢羊羊头上没草

最新推荐文章于 2025-05-01 21:31:07 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端开发语言前端框架 npm

本文链接：https://blog.youkuaiyun.com/yzwlogo/article/details/131480525

版权

Pinia是Vue.js的轻量级状态管理工具，作为vuex的替代。文章介绍了Pinia的基本使用步骤，包括安装、在main.js中配置、定义模块以及在组件中使用。此外，还讨论了如何通过pinia-plugin-persistedstate实现状态的持久化存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、pinia是什么：

1、Pinia 是 Vue.js 的轻量级状态管理库，是vuex的升级版。

2、pinia核心概念是 state、actions、getters、modules、plugins

二、pinia基本使用：

1、装包：npm i pinia。

2、在main.js中use

import { createApp } from "vue"
import App from "./App.vue"
import { createPinia } from "pinia"

const app = createApp(App)
const pinia = createPinia()

app.use(pinia).mount("#app")

3、定义模块：例如新建文件src/store/xxxx.js

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 参数1：模块名
export default defineStore('counter',() => {
    // 定义数据。类比：state
    const count = ref(0)
    // 定义修改数据方法 类比：muatations，actions
    const addCount = () => {
        count.value++
    }
    // 定义计算属性，例如：值是count的两倍
    const doubleCount = computed(() => {
        return count.value * 2
    })

    // 导出，以便使用
    return {
        count,
        addCount,
        doubleCount
    }
})

4、使用

<template>
    <div>
        首页{{ countStore.count }}
    </div>
    <button @click="countStore.addCount">dtn</button>
</template>

<script setup>
    import useCountStore from '../store/counter'
    const countStore = useCountStore()
    console.log(countStore)
</script>

5、结构导入的 countStore,方法不能结构 （看个人需求结构）

// 先导入api
impor { storeToRefs } from 'pinia'

// 结构
const { count, doubleCount } = storeToRefs(countStore)

三、持久化：

第三方插件

pinia-plugin-persistedstate

1、安装：npm i pinia-plugin-persistedstate

2、在main.js中导入

import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
createApp(App).use(pinia).use(router).mount('#app')

3、使用

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
// 参数1：模块名
export default defineStore('counter',() => {
    // 定义数据。类比：state
    const count = ref(0)
    // 定义修改数据方法 类比：muatations，actions
    const addCount = () => {
        count.value++
    }
    // 定义计算属性，例如：值是count的两倍
    const doubleCount = computed(() => {
        return count.value * 2
    })
    // 导出，以便使用
    return {
        count,
        addCount,
        doubleCount
    }
},{
    // 持久化存储
    persist:{
        // 设置key名 默认持久所有的数据
        key:'counter',
        // 修改存储位置 默认在localStorage中
        storage:sessionStorage，
        // 只想持久化单个数据
        paths: ['count', 'xxxx'], // 要持久化的属性
    }
})