Vue3的pinia使用及持久化存储

一、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'], // 要持久化的属性
    }
})