vue3 pinia问题？

作者站长头像
站长
· 阅读数 6

pinia

import {defineStore} from 'pinia'

export const useMy = defineStore('my', () => {
    return {user_id:'',username:''}
})

router

import { useMy } from '@/stores/my'


router.beforeEach(async (to, from, next) => {

    const my = useMy();
    my.user_id = 1;
    my.username = 'user';

    next();
})

HomeView.vue

<template>
    <H1>HomeView.vue</H1>
</template>

<script>
import {useMy} from "@/stores/my";

export default {
    name: "HomeView",
    setup() {

        const my = useMy();

        console.log(my.username)

        return {my}
    }
}

我在router.beforeEach中设置了，为什么组件中HomeView.vue里面的console.log(my.username)为空

回复
1个回答
avatar
test
2024-07-07

问题出在你在组件中使用 useMy() ，它创建了一个新的 store 实例而不是你在 router.beforeEach 中设置的那个实例。

为了在不同的组件中共享相同的 store 实例，你需要在组件中使用 useStore() 方法，并将它传递给组件：

vueCopy code

<template>
  <h1>HomeView.vue</h1>
</template>

<script>
import { useStore } from 'pinia'

export default {
  name: 'HomeView',
  setup() {
    const store = useStore()
    console.log(store.my.username)

    return { store }
  }
}
</script>

在 useStore() 方法中不需要传递参数，因为它默认使用主 store。

另外，在你的路由守卫中也有一个问题，你需要在 useMy() 方法中传递一个唯一的 ID，以确保它返回正确的 store 实例：

router.beforeEach(async (to, from, next) => {
  const my = useMy('my-store') // 传递一个唯一的 ID
  my.user_id = 1
  my.username = 'user'
  next()
})

这将确保你在路由守卫中设置的是同一个 store 实例，可以在组件中共享和访问该实例。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容