前言
在Vue应用中，状态管理是一个重要的方面，它帮助我们维护跨组件的数据流和状态一致性。Pinia是一个轻量级的Vue状态管理库，它提供了灵活的方式来创建和管理状态，前面也是讲解了如何存储和读取数据，本文就开始讲解如何修改数据，以下是使用Pinia修改数据的三种方式，以及如何在组件中实现这些方法。
第一种修改方式：直接修改
最直接的方式是直接访问状态对象并修改其属性值。这种方式简单明了，但在实际应用中，我们通常会避免这样做，因为它破坏了封装性，并且不利于状态的响应式更新。
代码语言：javascript复制countStore.sum = 666;在组件中，你可以通过countStore对象直接修改sum的值。但这种方法不推荐用于大型应用，因为它不易于追踪和维护。
第二种修改方式：批量修改
当需要同时修改多个属性时，可以使用$patch方法进行批量更新。这个方法允许你传递一个对象，该对象包含要修改的属性和新的值。
countStore.$patch({
sum: 999,
school: 'qinghua'
});使用$patch方法可以确保只有指定的属性被更新，而不会影响到其他状态。
第三种修改方式：借助action修改
在Pinia中，actions是用来封装业务逻辑的地方。通过定义actions，我们可以在组件中触发这些方法来修改状态，同时可以在actions内部执行更复杂的逻辑。
import { defineStore } from 'pinia';
export const useCountStore = defineStore('count', {
actions: {
increment(value) {
console.log('increment被调用了', value);
if (this.sum < 10) {
this.sum = value;
}
}
},
state() {
return {
sum: 6,
school: 'qinghua',
address: '宏福科技园'
};
}
});在组件中，你可以通过调用countStore.increment(n.value)来执行increment方法，并且可以根据业务需求添加更多的逻辑。
在组件中实现修改数据的方法
在Vue组件中，我们可以结合上述三种方式来修改数据。以下是如何在组件中使用这些方法的示例：
代码语言：vue复制<template>
<div class="count">
<h2>当前求和为：{{ countStore.sum }}</h2>
<h3>欢迎来到:{{ countStore.school }}，坐落于：{{ countStore.address }}</h3>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import { ref,reactive } from "vue";
// 引入useCountStore
import {useCountStore} from '@/store/count'
// 使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore()
// 数据
let n = ref(1) // 用户选择的数字
// 方法
function add(){
// 第一种修改方式
// countStore.sum = 1
// 第二种修改方式
/* countStore.$patch({
sum:888,
school:'尚硅谷',
address:'北京'
}) */
// 第三种修改方式
countStore.increment(n.value)
}
function minus(){
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>在组件的<script>部分，我们首先通过useCountStore获取到countStore实例。然后定义了add方法，它调用了countStore中的increment action来修改sum的值。这种方式不仅使得状态管理更加清晰，而且也便于我们在未来添加更复杂的业务逻辑。
总结
使用Pinia进行状态管理时，我们可以选择直接修改、批量修改或借助actions来修改数据。每种方式都有其适用的场景，但在实际开发中，推荐使用actions来封装业务逻辑，这样可以提高代码的可维护性和可读性。通过结合这些方法，我们可以有效地管理Vue应用的状态。
