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

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

超级简单，不需要耐心

pinia ：新一代的VueX

1. 安装

npm install pinia
1

2. 在main.js中引入

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

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

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

// 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 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 使用

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

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

<script setup>
// 引入stroe文件
import {useCounterStore} from "@/stores/counter"
const countStore = useCounterStore()
script>
1
2
3
4
5
6
7
8
9
10
11
12

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

<template>
    计数器：{{count}}<br>
    加倍计数器：{{doubleCount}}<br>
    <button @click="increment">点我加1button>
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
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

pinia-plugin-persistedstate ： 数据持久化

视频
主页

1. 安装

npm : npm i pinia-plugin-persistedstate
1

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')

1
2
3
4
5
6
7
8
9
10

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

查看保存在localstorage中的结果

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

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

    persist: {
        storage: sessionStorage,
        paths:['count']
    }
1
2
3
4

什么是持久化？

1. 非持久化

2. 持久化