Pinia 学习之路（第 3 部分）：storeToRefs 和改变数据状态

2023-12-18 01:39:40

在 Pinia 的学习之旅中，第三部分将深入探讨 storeToRefs 函数和改变数据状态的机制。这两个概念对于管理和操作存储在 Pinia 存储中的数据至关重要。本文将详细介绍如何使用 storeToRefs 创建响应式引用，并展示如何通过直接分配、$patch 方法和事件处理程序来改变存储中的数据状态。

`storeToRefs` 函数

storeToRefs 函数允许我们创建存储中特定状态的响应式引用。这对于在组件中访问和修改数据非常有用，而无需直接操作存储本身。

使用方法

要使用 storeToRefs，我们需要将存储和我们想要创建引用的键作为参数传递给函数。例如：

import { storeToRefs } from 'pinia';
import { useMyStore } from './myStore';

const myStore = useMyStore();
const { count } = storeToRefs(myStore, 'count');

现在，我们可以通过 count 响应式引用来访问和修改存储中的 count 状态。

示例代码

以下是一个简单的示例，展示了如何在 Vue 组件中使用 storeToRefs：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { storeToRefs } from 'pinia';
import { useMyStore } from './myStore';

export default {
  setup() {
    const myStore = useMyStore();
    const { count } = storeToRefs(myStore);

    function increment() {
      myStore.count++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

改变数据状态

改变存储中的数据状态有多种方法，每种方法都有其适用场景。

直接分配

我们可以直接将新值分配给存储中的状态。例如：

myStore.count = 5;

`$patch` 方法

$patch 方法允许我们部分更新存储中的状态。它接受一个函数作为参数，该函数将收到当前状态并返回更新后的值。例如：

myStore.$patch((state) => {
  state.count += 1;
});

事件处理程序

我们可以使用事件处理程序来响应数据状态的变化。事件处理程序可以附加到存储本身或其状态。例如：

myStore.$on('countChanged', (newCount) => {
  // 当 count 状态改变时执行
});

myStore.count.$on('increment', () => {
  // 当 count 状态增加时执行
});

实践示例

以下是一个示例，展示了如何在 React 组件中使用 storeToRefs 和 $patch 方法：

import { storeToRefs, computed } from 'pinia';
import { useMyStore } from './myStore';
import { useState } from 'react';

export default function MyComponent() {
  const myStore = useMyStore();
  const { count } = storeToRefs(myStore);
  const [inputValue, setInputValue] = useState('');

  const handleIncrement = () => {
    myStore.$patch((state) => {
      state.count++;
    });
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}