Vue3 Pinia商店在初始化前无法访问“存储”

Question

我有一个UserStore，它包含关于当前用户的一些信息。这家商店还负责进出。

为了使getter可用，我将getter映射到我的Vue组件中的计算属性。

不幸的是，我看到一个错误，它在初始化之前不能访问useUserStore。

这是我的组成部分：

<template>
  //...
</template>

<script>
import {mapState} from "pinia"
import {useUserStore} from "../../stores/UserStore.js";
import LoginForm from "../../components/forms/LoginForm.vue";

export default {
  name: "Login",
  components: {LoginForm},
  computed: {
    ...mapState(useUserStore, ["user", "isAuthenticated"]) //commenting this out makes it work
  }
}
</script>

这是我的店：

import { defineStore } from 'pinia'
import {gameApi} from "../plugins/gameApi.js"
import {router} from "../router.js";

export const useUserStore = defineStore("UserStore", {
    persist: true,
    state: () => ({
            authenticated: false,
            _user: null
    }),

    getters: {
        user: (state) => state._user,
        isAuthenticated: (state) => state.authenticated
    },

    actions: {
        async checkLoginState() {
            // ...
        },
        async loginUser(fields) {
            // ...
        },
        async logutUser() {
            // ...
        }
    }
})

还有我的main.js

import {createApp} from 'vue'
import App from './App.vue'
import gameApi from './plugins/gameApi'
import {router} from './router.js'
import store from "./stores/index.js";

createApp(App)
    .use(store)
    .use(router)
    .use(gameApi)
    .mount('#app')

最后，我的商店配置：

import {createPinia} from "pinia"
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import {useUserStore} from "./UserStore.js";

const piniaStore = createPinia()
piniaStore.use(piniaPluginPersistedstate)

export default {
    install: (app, options) => {
        app.use(piniaStore)

        const userStore = useUserStore()
        const gameStore = useGameStore()
    }
}

Answer 1

我无法使用与Vuex类似的“旧”方式初始化商店。相反，我不得不使用setup()函数多古半夏。

<script>
import {useUserStore} from "../../stores/UserStore.js";

export default {
  name: "RegisterForm",

  setup() {
    // initialize the store
    const userStore = useUserStore()
    return {userStore}
  },

  data() {
    return {
      // ...
    }
  },

  methods: {
    checkLoginState() {
      this.userStore.checkLoginState()
    }
  }
}
</script>