Vue3 + pinia: как сделать реактивным значение из ?store
Я использую vue 3 с составом api и pinia.
У меня есть хранилище авторизации, которое читает из хранилища электронную почту по умолчанию и пароль по умолчанию.
import { useAuthStore } from "stores/auth";
const authStore = useAuthStore();
const email = authStore.loginUser;
const password = authStore.passwordUser;
Тогда я использую электронную почту и пароль как v-model.
Проблема в том, что оба не реактивны. Если я изменю значение из текстового ввода, модель не обновится
Прошу разъяснения проблемы и решения.
Ответы 2
const email = authStore.loginUser
создает константу email с текущим значением authStore.loginUser, теряя реактивность. Чтобы сохранить реактивность, вы можете использовать computed:
import { computed } from 'vue'
// ...
const email = computed({
get() { return authStore.loginUser },
set(val) { authStore.loginUser = val }
})
... или вы можете использовать предоставленную оболочку storeToRefs, предназначенную для извлечения/деконструкции реактивных реквизитов хранилища при сохранении их реактивности (в основном, чтобы избежать приведенного выше шаблона):
import { storeToRefs } from 'pinia'
// ...
const {
loginUser: email,
passwordUser: password
} = storeToRefs(authStore)
// email & password are now reactive
Важно: вы хотите деконструировать state и getters только с помощью storeToRefs. Действия должны использоваться непосредственно из объекта хранилища (authStore в вашем случае) или деконструироваться без оболочки:
const { actionOne, actionTwo } = authStore
Это указано в документах, указанных выше:
... поэтому методы и нереактивные свойства полностью игнорируются.
В заключение вы обычно получаете две деконструкции из каждого магазина:
import { useSomeStore } from '@/store'
// reactive:
const { s1, s2, g1, g2 } = storeToRefs(useSomeStore())
// non-reactive:
const { a1, a2 } = useSomeStore()
где s1, s2 — state члены, g1, g2 — getters, а a1, a2 — actions.
Я исправил так просто, как
import { useAuthStore } from "stores/auth";
const authStore = useAuthStore();
const email = ref(authStore.loginUser);
const password = ref(authStore.passwordUser);
const rememberme = ref(false);
нет бесполезно storeToRefs используется
Хорошая мысль, упаковка ref тоже работает. Что касается утилиты storeToRefs, я удивлен, что вы предпочитаете вызывать функцию для каждого элемента коллекции вместо вызова функции для всей коллекции. Но это синтаксическое предпочтение, которое субъективно. Вы просили объяснить, почему он так себя ведет, я его предоставил.
@tao, ты прав, лучше использовать reactive(). Основная цель этого вопроса - понять эквивалент от v2 до v3 и от vuex до pinia; Я все равно применю ваши предложения
Кроме того, мне было неясно, что и 'ref', и storeToRefs не "магически связывают" хранилище с локальной константой, а просто инициализируют, используя значение по умолчанию. Это, конечно, то, что мне было нужно
Непонятно, какое поведение вы ожидаете. Вы хотите изменить authStore через v-model?