Vue3+Pinia：Composition API下Store值无法响应式的问题求助

问题原因 #

你直接把Pinia store中的loginUser、passwordUser赋值给普通变量email、password，这相当于提取了state当前的原始值快照，和Pinia的响应式系统彻底断开了关联。后续输入框修改的只是这个独立的普通变量，既不会同步回Pinia store，也不会随着store的变化而更新，自然没有响应式效果。

解决方案 #

方案1：直接绑定store属性到v-model（最简单） #

Pinia的state属性本身就是响应式的，直接在模板中绑定store的属性即可实现双向同步：

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

<input v-model="authStore.loginUser" type="email" placeholder="邮箱" />
<input v-model="authStore.passwordUser" type="password" placeholder="密码" />

方案2：用computed属性做代理（适合需要额外处理的场景） #

如果需要对输入值做格式校验、转换等额外逻辑，可以用Vue的computed属性做双向代理，关联store的响应式state：

import { useAuthStore } from "stores/auth";
import { computed } from 'vue';

const authStore = useAuthStore();

const email = computed({
  get() {
    return authStore.loginUser;
  },
  set(newVal) {
    // 这里可以加邮箱格式校验逻辑
    authStore.loginUser = newVal;
  }
});

const password = computed({
  get() {
    return authStore.passwordUser;
  },
  set(newVal) {
    // 这里可以加密码强度校验逻辑
    authStore.passwordUser = newVal;
  }
});

模板中直接绑定email和password即可：

<input v-model="email" type="email" placeholder="邮箱" />
<input v-model="password" type="password" placeholder="密码" />

方案3：通过store的action更新（符合规范场景） #

如果项目要求必须通过action修改state（便于集中维护更新逻辑），可以先在auth store中定义action：

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    loginUser: '默认邮箱',
    passwordUser: '默认密码'
  }),
  actions: {
    updateLoginUser(newVal) {
      // 可添加校验、日志等逻辑
      this.loginUser = newVal;
    },
    updatePasswordUser(newVal) {
      this.passwordUser = newVal;
    }
  }
});

然后在组件中通过监听输入或事件调用action：

import { useAuthStore } from "stores/auth";
import { ref, watch } from 'vue';

const authStore = useAuthStore();
const email = ref(authStore.loginUser);
const password = ref(authStore.passwordUser);

// 监听变量变化，调用action更新store
watch(email, (newVal) => {
  authStore.updateLoginUser(newVal);
});

watch(password, (newVal) => {
  authStore.updatePasswordUser(newVal);
});

或者直接在模板中用@input事件：

<input :value="email" @input="authStore.updateLoginUser($event.target.value)" type="email" />
<input :value="password" @input="authStore.updatePasswordUser($event.target.value)" type="password" />

内容的提问来源于stack exchange，提问作者realtebo