在 Vue 3 Pinia 商店中设置状态的正确方法是什么？答案

【问题标题】：What is the correct way of setting state on a Vue 3 Pinia store?在 Vue 3 Pinia 商店中设置状态的正确方法是什么？
【发布时间】：2022-12-03 03:38:55
【问题描述】：

在 Vue 3（组合 API）Pinia 商店上初始化状态时，哪种模式更“正确”或惯用？

选项1：

  state: () => ({
    user: {},
  }),

选项 2：

  state: () => {
    return {
      user: {},
    };
  },

选项 3：也许别的什么？

【问题讨论】：

【解决方案1】：

他们是一样的。选项 1 和 2 是返回对象的函数。在箭头函数中，{ 代表函数的内容（如function x () {）。所以如果你想返回一个对象（比如return {），你可以像选项 1 那样使用({。

【讨论】：

【解决方案2】：

选项2。它应该是一个返回状态的函数。 https://pinia.vuejs.org/core-concepts/state.html

【讨论】：

【解决方案3】：

对于 Vue 3组合API在 Pinia 中，正确的模式是：

export const useUserStore = defineStore('users', () => {
  const user = ref({});

  return { user };
})

它被称为“设置商店”。

在设置商店中：

ref()s 成为state 属性

computed()s 变成getters

function()s 变成actions

更多信息：https://pinia.vuejs.org/core-concepts/#setup-stores

【讨论】：