0
点赞
收藏
分享

微信扫一扫

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

女侠展昭 2023-11-16 阅读 44

黑马前端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()
</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
</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. 持久化

在这里插入图片描述

举报

相关推荐

0 条评论