我是第一次使用Pinia。我正在用返回userId的后端API实现登录功能，我想将此userId存储在存储中，并希望在vue组件中的任何地方访问它。目前，我无法从存储中访问userId，它不会在vue模板中打印userId。以下是我的代码：Sores/user.js

import { defineStore } from 'pinia'
import axios from 'axios'

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    userId:null ,
 
  }),
  actions: {
    login({ email, password }) {
        axios.post('/user/login', { email: email, password: password }).then((res) => {
            console.log('res',res.data.userId)
            this.userId = res.data.userId
         

        }).catch((error)=>alert('error'))
    },
    
  }
})

Login.vue

<script setup>
import axios from 'axios';
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router';

const email = ref('');
const password = ref('');

const userStore = useUserStore();
const router = useRouter();

const login = () => {
    userStore.login({ email: email.value, password: password.value });
    router.push('/dashboard')
}
</script>

Dashboard.vue在这里它想从存储打印用户ID

<template>
    <div id="dashboard">
        <div class="row">

        <div class="col-md-4">
           
            <Header />
            {{ userStore.userId }}

        </div>
    
        </div>
    </div>
</template>

<script setup>
import Header from './Header.vue'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>