使用组合 API 时，在 Pinia 存储中封装数据的常用方法是什么？

Question

我将 Vue 3 与 Pinia 一起使用，并希望在我的 Pinia 商店中使用组合 API。给定以下示例商店

export const useMyStore = defineStore("my", () => {
    const currentState = ref(0);

    return { currentState };
  }
);

我可以直接修改currentState的值。我不确定这是不是要走的路，或者我是否应该阻止这种情况并提供一些获取和设置功能，例如

export const useMyStore = defineStore("my", () => {
    const currentState = ref(false);

    const readonlyCurrentState = computed((): Readonly<boolean> => currentState.value);

    function changeState(newState: boolean) {
        currentState.value = newState;
    }

    return { readonlyCurrentState, changeState };
  }
);

选项 API 通过提供 getter 和操作来解决问题，所以我想我是否应该在这里实现相同的目标。

这可能是一个基于意见的问题，但我想知道我是否应该封装状态 currentState 以防止意外损坏。

Answer 1

I can directly modify the value of currentState

是的，这是故意的。如comparison with Vuex

中所述

mutations no longer exist. They were very often perceived as extremely verbose. They initially brought devtools integration but that is no longer an issue.

这是更多的技术原因，但您可以在此讨论中阅读作者本人（以及不喜欢这种新“自由”的人）的更多信息：Add an option to disallow direct state modification from component

一般来说，您问题中的代码完美地说明了这一点 - 很多不必要的代码只是为了更改简单的布尔值。当然，在某些情况下，数据更复杂，您想强制执行一些约束等，在这些情况下，不受限制的直接突变可能被认为是危险的。我认为你问题中的模式是完全可行的，你可以在链接的讨论中找到更多的想法（和实验性的“严格模式”支持提交等待反馈）

我个人认为很多安全检查可以通过 linting 尤其是 TypeScript 定义来完成。您在开发过程中获得了额外的安全性，而无需在运行时付出代价（就额外代码的执行和捆绑和服务而言）。 Pinia 的伟大之处在于它让我们可以选择如何解决问题...

使用组合 API 时，在 Pinia 存储中封装数据的常用方法是什么？

What is the common way to encapsulate data inside Pinia stores when using the composition API?

javascript

typescript

vue.js

pinia