Pinia 中的 storeToRefs 总结

在 Vue.js 和 Pinia 的上下文中，storeToRefs 是一个非常重要的工具函数，它用于将 Pinia store 中的状态或 getter 转换成响应式的、可解构的引用对象。这样做的好处是，你可以在组件中解构这些引用，并在模板或其他计算属性、侦听器中直接使用它们，同时保持它们对原始 store 状态的响应性。

为什么需要 storeToRefs？

在 Vue 3 和 Pinia 中，组件的响应性通常是通过 ref 和 reactive API 提供的。然而，直接从 Pinia store 中解构状态或 getter 会丢失其响应性，因为解构操作实际上是在创建这些状态或 getter 的拷贝，而这些拷贝并不是响应式的。为了保持响应性，你需要使用 storeToRefs。

如何使用 storeToRefs？

假设你有一个 Pinia store，如下所示：

	// stores/useCounter.js
	import { defineStore } from 'pinia';
	export const useCounterStore = defineStore('counter', {
	state: () => ({
	count: 0,
	}),
	getters: {
	doubleCount: (state) => state.count * 2,
	},
	actions: {
	increment() {
	this.count++;
	},
	},
	});

在组件中使用 storeToRefs 来解构这个 store 的状态或 getter，如下所示：

	<template>
	<div>
	<p>Count: {{ count }}</p>
	<p>Double Count: {{ doubleCount }}</p>
	<button @click="increment">Increment</button>
	</div>
	</template>
	<script>
	import { defineComponent } from 'vue';
	import { useCounterStore } from './stores/useCounter';
	import { storeToRefs } from 'pinia';
	export default defineComponent({
	setup() {
	const counterStore = useCounterStore();
	// 使用 storeToRefs 保持响应性
	const { count, doubleCount } = storeToRefs(counterStore);
	function increment() {
	counterStore.increment();
	}
	return {
	count,
	doubleCount,
	increment,
	};
	},
	});
	</script>

在这个例子中，storeToRefs(counterStore) 创建了一个包含 count 和 doubleCount 的新对象，这些属性是响应式的引用，直接指向 store 中的状态或 getter。因此，当 counterStore 中的 count 发生变化时，模板中的 count 和 doubleCount 也会自动更新。

总结

storeToRefs 是 Pinia 中一个非常有用的函数，它允许你以响应性的方式解构 Pinia store 中的状态或 getter。这样做不仅使代码更加清晰和易于管理，而且确保了你解构出来的属性仍然与原始 store 保持同步。