vue3 + pinia：如何从商店中响应一个值

Question

我正在使用 vue 3 与合成 api 和 pinia

我有一个身份验证商店，它正在从商店读取默认电子邮件和默认密码

import { useAuthStore } from "stores/auth";
const authStore = useAuthStore();

const email = authStore.loginUser;
const password = authStore.passwordUser;

然后我使用电子邮件和密码作为v-model。

问题是两者都不是反应性的。如果我更改文本输入中的值，模型不会更新

我恳请对问题的解释和解决方案。

Answer 1

const email = authStore.loginUser // \xe2\x9d\x8c\n

\n

email使用 的当前值创建一个常量authStore.loginUser，失去反应性。为了保持反应性，你可以使用computed：

\n

import { computed } from \'vue\'\n// ...\n\nconst email = computed({\n  get() { return authStore.loginUser },\n  set(val) { authStore.loginUser = val }\n}) // \xe2\x9c\x85\n// email is now a computed ref\n

\n

...或者您可以使用提供的storeToRefs包装器，该包装器设计用于提取/解构存储反应性道具，同时保持其反应性（基本上是为了避免上述样板）：

\n

import { storeToRefs } from \'pinia\'\n// ...\n\nconst { \n  loginUser: email,\n  passwordUser: password\n} = storeToRefs(authStore) // \xe2\x9c\x85\n// email & password are now refs\n

\n\n

重要提示：您只想解构state和getters使用storeToRefs。应直接从商店对象使用操作（authStore在您的情况下）使用或在没有包装器的情况下解构：

\n

import { computed } from \'vue\'\n// ...\n\nconst email = computed({\n  get() { return authStore.loginUser },\n  set(val) { authStore.loginUser = val }\n}) // \xe2\x9c\x85\n// email is now a computed ref\n

\n

这是在上面链接的文档中指定的：

\n

\n

...所以方法和非反应性属性被完全忽略。

\n

\n\n

总之，您通常会从每个商店得到两个解构：

\n

import { storeToRefs } from \'pinia\'\n// ...\n\nconst { \n  loginUser: email,\n  passwordUser: password\n} = storeToRefs(authStore) // \xe2\x9c\x85\n// email & password are now refs\n

\n

其中s1,s2是state成员，g1,g2是getters和a1,a2是actions。

\n