【Vue3】Pinia修改数据

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何修改 Pinia 中数据。

Pinia 是 Vue 专属的状态管理库，允许跨组件或页面共享数据。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 在 【Vue3】Pinia存储及读取数据 基础上新增一个功能组件 Reader.vue，展示修改 Pinia 数据的第一种方法。

<template>
    <div class="reader">
        <button @click="borrow">借阅</button>
        <br>
        <h2>借阅图书</h2>
        <ol>
            <li v-for="book in books" :key="book.id">
                {
  { book.title }} : {
  { book.author }}
            </li>
        </ol>
    </div>
</template>

<script setup lang="ts">
import { useBookStore } from '@/store/book'
import { reactive } from 'vue';

const bookStore = useBookStore()
const books = reactive<any>([])

function borrow() {
    bookStore.bookCount -= 1
    const book = bookStore.books.shift()
    books.push(book)
}
</script>

<style scoped lang="scss">
.reader