使用Pinia访问状态失败：注册后更新用户登录状态报错

问题场景 #

在对接Firebase的注册页面中，尝试用Pinia更新登录状态时触发错误：Uncaught (in promise) TypeError: this.userStore is undefined。测试时打印this.userStore.userLoggedIn显示undefined，但直接打印this.userLoggedIn可行，修改this.userStore.userLoggedIn无效。

Pinia Store代码 #

import { defineStore } from 'pinia'

export default defineStore('user', {
    state: () => ({
        userLoggedIn: false,
    }),
})

RegisterForm组件代码 #

<script>
import { auth, usersCollection } from "@/includes/firebase";
import { mapWritableState } from 'pinia';
import useUserStore from "@/stores/user";

export default {
  name: "registerForm",
  
  computed: {
    ...mapWritableState(useUserStore, ['userLoggedIn'])
    
  },
  mounted() {
      console.log(this.userStore.userLoggedIn);
    },
  methods: {
    async register(values) {
      this.reg_show_alert = true;
      this.reg_in_submission = true;
      this.reg_alert_variant = "bg-blue-500";
      this.reg_alert_msg = "Please wait! You account is bring created.";

      let userCred = null;
      try {
        userCred = await auth.createUserWithEmailAndPassword(
          values.email,
          values.password
        );
      } catch (error) {
        this.reg_in_submission = false;
        this.reg_alert_variant = "bg-red-500";
        this.reg_alert_msg =
          "An unexpected error occured. Please try again later.";
        return;
      }

      try {
        await usersCollection.add({
          name: values.name,
          email: values.email,
          age: values.age,
          country: values.country,
        });
        
      } catch (error) {
        this.reg_in_submission = false;
        this.reg_alert_variant = "bg-red-500";
        this.reg_alert_msg =
          "An unexpected error occured. Please try again later.";
        return;
      }

      this.userStore.userLoggedIn = true;         

      this.reg_alert_variant = "bg-green-500";
      this.reg_alert_msg = "You account has been created";
      console.log(userCred);
      
      
    },
  },
}
</script>

问题原因 #

1. this.userStore未初始化：仅导入了useUserStore方法，但从未在组件中调用该方法创建Store实例，因此this.userStore不存在于组件实例上。
2. mapWritableState的作用误解：mapWritableState已经将Store中的userLoggedIn状态映射为组件的可写计算属性，直接通过this.userLoggedIn即可访问和修改状态，无需额外通过this.userStore。

解决方法 #

方法一：使用映射后的计算属性（推荐） #

直接操作mapWritableState映射的属性即可，无需this.userStore：

• 将mounted钩子中的打印语句改为console.log(this.userLoggedIn);
• 将register方法中的状态修改语句改为this.userLoggedIn = true;

修改后关键代码片段：

mounted() {
    console.log(this.userLoggedIn);
},
methods: {
    async register(values) {
        // ... 其他逻辑
        this.userLoggedIn = true;
        // ... 其他逻辑
    }
}

方法二：初始化Store实例并直接操作 #

如果需要通过this.userStore访问状态，需在组件中创建Store实例：
在组件的data或created钩子中初始化Store：

<script>
import { auth, usersCollection } from "@/includes/firebase";
import { mapWritableState } from 'pinia';
import useUserStore from "@/stores/user";

export default {
  name: "registerForm",
  data() {
    return {
      userStore: useUserStore()
    }
  },
  // 也可使用created钩子初始化
  // created() {
  //   this.userStore = useUserStore();
  // },
  computed: {
    ...mapWritableState(useUserStore, ['userLoggedIn'])
  },
  mounted() {
      console.log(this.userStore.userLoggedIn);
    },
  methods: {
    async register(values) {
        // ... 其他逻辑
        this.userStore.userLoggedIn = true;
        // ... 其他逻辑
    }
  }
}
</script>

注意：两种访问方式可任选其一，建议保持风格一致避免混淆。

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