Pinia 及其数据持久化 Vue新一代状态管理插件

黑马前端Vue新一代状态管理插件Pinia快速入门视频教程
Pinia主页

超级简单，不需要耐心

pinia ：新一代的VueX

1. 安装

npm install pinia

2. 在main.js中引入

import { createPinia } from 'pinia'
app.use(createPinia())

3. 新建stores目录，新建.js文件

pinia的使用和在setup中写的代码基本一致，记得`ruturn`数据就行

// path:@/stores/counter.js
import {computed, ref} from "vue";
import {defineStore} from 'pinia'
// 第一个参数是 store 的唯一标识id
export const useCounterStore = defineStore('counter',()=>{
    // VueX：state，数据
    const count = ref(0)
    // VueX：getters，计算属性
    const doubleCount = computed(() => count.value * 2)
    // VueX：actions + mutations，方法
    function increment(){
        count.value++
    }
    return { count, doubleCount, increment }
})

4. 使用

在vue中导入pinia后需要**赋值操作**，然后使用`.`来访问pinai中的数据和方法

App.vue
<template>
    计数器：{{countStore.count}}<br>
    加倍计数器：{{countStore.doubleCount}}<br>
    <button @click="countStore.increment">点我加1</button>
</template>

<script setup>
// 引入stroe文件
import {useCounterStore} from "@/stores/counter"
const countStore = useCounterStore()
// 不结构不需要使用value
console.log(countStore.count)
</script>

5. 另一种使用方式，对store解构，不使用countStore.去访问store中的数据和方法

<template>
    计数器：{{count}}<br>
    加倍计数器：{{doubleCount}}<br>
    <button @click="increment">点我加1</button>
</template>

<script setup>
import {useCounterStore} from "@/stores/counter"
import {storeToRefs} from "pinia";
// 得到store的实例对象
const countStore = useCounterStore()
// 对state的解构需要使用storeToRefs方法
const { count, doubleCount } = storeToRefs(countStore)
// 对action的结构，直接干
const {increment} = countStore
// 解构后使用时加value
console.log(count)
</script>

pinia-plugin-persistedstate ： 数据持久化

视频
主页

1. 安装

npm : npm i pinia-plugin-persistedstate

2. main.js中pinia使用插件

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia} from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia() // 创建pinia实例
pinia.use(piniaPluginPersistedstate) // pinia使用持久化插件
createApp(App).use(pinia).mount('#app')

3. 最简单粗暴的用法，将state数据保存在localstorage（关闭浏览器数据清空）

查看保存在localstorage中的结果

4. 保存到session storage中（session storage关闭页面丢失数据）

只需要给persist加个对象，paths中是要保存的数据的名字

    persist: {
        storage: sessionStorage,
        paths:['count']
    }

什么是持久化？

1. 非持久化

2. 持久化

持久化的坑

1. 记住一句话：网页上使用的数据如果已经被持久化保存了，那这个变量就会先去读持久化保存的数据
   在写代码的时候，记得手动清除localStorage里面的东西
2. store中要持久化保存的数据都用ref(),不要用reactiv(),不要用reactiv(),不要用reactiv()