pinia使用和持久化存储

不求甚解bc

已于 2023-05-16 16:08:38 修改

阅读量1.3k

点赞数

分类专栏： vue ts 文章标签： vue.js 前端

于 2023-05-16 11:42:29 首次发布

本文链接：https://blog.csdn.net/bocongbo/article/details/130702292

版权

vue 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

该文介绍了如何在Vue项目中利用Pinia进行状态管理，并详细讲解了如何安装和配置pinia-plugin-persistedstate插件来实现数据的持久化存储，包括设置存储键名、指定持久化路径等步骤。此外，还展示了在组件中如何调用和修改store中的状态。

摘要由CSDN通过智能技术生成

官网：安装 | Pinia 中文文档

项目构建时选择安装pinia，下面是使用方法以及持久化存储配置

官网：快速开始 | pinia-plugin-persistedstate

1、安装持久化存储插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate -S

2、main.ts

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

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.mount('#app')

3、在/src/store/目录下新建user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Tom', // 用户名
    age: 18, // 年龄
    weight: 60 // 公斤
  }),
  getters: {
    // 获取体重市斤
    getWeight: (state) => {
      return state.weight * 2
    }
  },
  actions: {
    // 修改用户名
    changeUserName(name: string) {
      this.name = name
    }
  },
  // 持久化插件配置
  persist: {
    key: 'store-user', // 本地存储key名称
    // storage: sessionStorage // 不设置默认存储localStorage
    paths: ['name'] // 指定持久化的值
  }
})

4、页面调用

<template>
  <div>
    <p>pinia-name: {{ name }}</p>
    <p>pinia-age: {{ age }}</p>
    <p>pinia-市斤: {{ storeUser.getWeight }}</p>
    <button @click="changeName">修改用户名称</button>
    <button @click="changeUser">批量修改</button>
    <button @click="changeNameFun">修改用户名称方法</button>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '../store/user'
import { storeToRefs } from 'pinia';
const storeUser = useUserStore()
const { name, age } = storeToRefs(storeUser) // 将pinia的值响应式

// 单个修改state
const changeName = () => {
  storeUser.name = 'Jack'
}
// 批量修改
const changeUser = () => {
  storeUser.$patch({
    name: 'LiuTao',
    age: 10,
    weight: 80
  })
}
// 调用action
const changeNameFun = ()=> {
  storeUser.changeUserName('Alex')
}
</script>