vue中的pinia使用和持久化 - 粘贴即用

最新推荐文章于 2024-03-21 11:18:16 发布

不可名状邵雅虎

最新推荐文章于 2024-03-21 11:18:16 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/shaoyahu/article/details/130169637

版权

学习关键语句：
pinia怎么用

写在前面

pinia 作为 vuex 的替代品好像变得不得不学习了，学起来一用发现 vuex 是什么麻烦的东西，我不认识

这篇文章一共包含的内容有：

安装 pinia
读取数据
修改数据
数据持久化

其中，修改数据只会演示比较常用的两种方式，数据持久化的方法来自满神的这篇文章

文章末尾会有此文章的使用文件链接

开始

安装 pinia

首先我们先创建一个空项目，这里我使用 vite 创建，各位用什么创建都可以

npm create vite

在这里插入图片描述
根据提示打开项目后，我们先将 App.vue 页面清空

App.vue

<template>
  <div>
    123
  </div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
</style>

接下来我们来安装 pinia

npm i pinia

写这篇文章时间的时候 pinia 的版本为 2.0.34 ，不能保证后续版本兼容注意
在这里插入图片描述

安装完成后，我们在 src 下新建文件夹叫 store，在 store 文件夹下新建文件 index.ts 和仓库文件 test.ts

在这里插入图片描述

我们将在 index.ts 文件中创建 pinia 实例

index.ts

import { createPinia } from 'pinia'

export const store = createPinia()

我们在 main.ts 中去引入并使用，这里弄得这么麻烦的原因是接下来还要进行持久化操作

main.ts
第 4 行和第 6 行

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { store } from './store'

createApp(App).use(store).mount('#app')

接下来我们来制作我们的第一个仓库，喔我早就创建好文件了，这个仓库就叫 test 好了

注意！在这里我遇到一个问题，导致仓库中的响应式对象只能通过 ref 设置而不能使用 reactive ，使用 reactive 声明的对象在持久化后数据会复原，但我找不到原因，希望有大佬能积极在评论区指点我

我们准备一些数据

test.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'

// defineStore 第一个参数是仓库名，第二个仓库类似于 setup
export const useTestStore = defineStore('test', () => {
    const num = ref<number>(0)
    const name = ref<string>('shaoyahu')
    const user = ref<{ name: string, age: number }>({
        name: '名字叫：',
        age: 18
    })
    const hobby = ref<string[]>(['sing', 'dance'])
    // 修改值的第一种方式 使用仓库的方法
    function addnum() {
        num.value++
    }
    function addhobby() {
        hobby.value.push('rap')
    }

    return {
        num,
        name,
        user,
        hobby,
        addnum,
        addhobby
    }
})

好了，到目前为止，我们的仓库已经准备好了，现在我们去读取数据吧

读取数据

我们将在刚才清空的 App.vue 页面中读取数据

App.vue

<template>
  <div>
    test.num:{{ test.num }}
    <hr>
    test.name:{{ test.name }}
    <hr>
    test.user:{{ test.user }}
    <hr>
    test.hobby:{{ test.hobby }}
    <hr>
    <button @click="test.addnum">num加一</button>
    <button @click="test.addhobby">hobby加一个</button>
  </div>
</template>

<script setup lang='ts'>
import { useTestStore } from './store/test'

const test = useTestStore()
</script>

<style scoped></style>

我们打开浏览器的 vue 工具，里面可以看到 pinia 中的数据
在这里插入图片描述
我们通过对比页面上的数据和 pinia 中的数据，就知道数据已经被我们正常读取到了，接下来我们来试试修改数据

修改数据

修改数据常用的有两种方式，一种是使用仓库中的修改数据的方法，一种是我们直接修改仓库中的数据

使用方法

直接使用仓库中的方法，在上面的文件中，我们点击那两个按钮就可以修改数据了，我们来看一看

在这里插入图片描述

创建函数修改

我们自己创建函数来修改仓库中的数据

App.vue

<template>
  <div>
    test.num:{{ test.num }}
    <hr>
    test.name:{{ test.name }}
    <hr>
    test.user:{{ test.user }}
    <hr>
    test.hobby:{{ test.hobby }}
    <hr>
    <button @click="test.addnum">num加一</button>
    <button @click="test.addhobby">hobby加一个</button>
    <button @click="editname">当场改名</button>
    <button @click="change">给user加个名字</button>
    <button @click="delhobby">删除一个hobby</button>
  </div>
</template>

<script setup lang='ts'>
import { useTestStore } from './store/test'

const test = useTestStore()
const editname = () => {
  test.name = '邵雅虎'
}
const change = () => {
  test.user.name += test.name
}
const delhobby = () => {
  test.hobby.pop()
}
</script>

<style scoped></style>

我们加了三个按钮用来修改数据
在这里插入图片描述

ok 这样我们修改数据也获得大成功，不过有一个问题，那就是这样修改的数据在浏览器刷新后就会恢复，所以我们接下来做数据持久化

数据持久化

想想为什么可以做到数据持久化，前端能把数据放哪呢，不就是放在浏览器里嘛，我们将数据存进浏览器的 localStorage 中

我们先在 src 目录下新建文件夹 utils ，并在文件夹下新建文件 storage.ts，我们封装两个方法来存取storage数据

storage.ts

//存缓存中
export const setStorage = (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value))
}
//缓存中读取
export const getStorage = (key: string) => {
    return (localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {})
}

接下来我们回到 store 下的 index.ts 文件中，进行数据持久化修改

index.ts

import { toRaw } from 'vue'
import { createPinia, type PiniaPluginContext } from 'pinia'
import { getStorage, setStorage } from '../utils/storage'

export const store = createPinia()

// 定义一个默认的保存在 localstroge 中的名字
const __piniaKey__: string = 'piniaDefault'
// 制作一个 pinia 插件
const piniaPlugin = (options?: any) => {
  return (context: PiniaPluginContext) => {
    const { store } = context
    // 读取上回存到的数据
    const data = getStorage(`${options?.key ?? __piniaKey__}-${store.$id}`)
    // 仓库中的数据发生改变时触发 $subscribe
    store.$subscribe(() => {
      let o = toRaw(store.$state)
      let obj: any = {}
      for (const key in o) {
        obj[key] = o[key].value
      }
      // 存入最新的数据
      setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`, obj)
    })
    return {
      ...data
    }
  }
}
// 使用插件，不给 key 时则使用默认名字
store.use(piniaPlugin({
  key: 'pinia'
}))