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