Pinia的store里怎么监听其他store的状态变化？

这个问题的关键在于 Pinia 的 setup 语法里，直接调用 userStore() 获取实例时，store 还没完全初始化好，所以 watch 根本绑不到正确的响应式数据上。

先说为什么你的写法不行：

你写的是 setup 语法（箭头函数形式），在这个函数执行的时候，userStore 还没有被创建出来。你调用 userStore() 拿到的确实是个 store 实例，但这个实例里面的状态不是响应式的——因为 Pinia 还没开始追踪它。

正确的写法有几种：

第一种，用 storeToRefs 把需要监听的状态提取成响应式 ref：

import { defineStore } from 'pinia'

import { userStore } from './user'

import { storeToRefs } from 'pinia'



export const cartStore = defineStore('cart', () => {

  const user = userStore()

  

  // 关键点：用 storeToRefs 把状态转为响应式 ref

  const { userId } = storeToRefs(user)

  

  watch(userId, (newId) => {

    if (newId) fetchCart(newId)

  })

  

  return { /* ... */ }

})

第二种，用 computed 包装一下再监听：

import { defineStore } from 'pinia'

import { userStore } from './user'

import { computed } from 'vue'



export const cartStore = defineStore('cart', () => {

  // 通过 computed 建立响应式依赖

  const userId = computed(() => userStore().userId)

  

  watch(userId, (newId) => {

    if (newId) fetchCart(newId)

  })

  

  return { /* ... */ }

})

第三种，用 Pinia 提供的 $subscribe，这是最官方的跨 store 监听方式：

import { defineStore } from 'pinia'

import { userStore } from './user'



export const cartStore = defineStore('cart', () => {

  const user = userStore()

  

  // 监听整个 userStore 的变化

  user.$subscribe((mutation, state) => {

    if (state.userId) {

      fetchCart(state.userId)

    }

  })

  

  return { /* ... */ }

})

$subscribe 的好处是它只会触发状态真正变化的时候，不会重复触发，而且能拿到 mutation 信息。

再补充一点：

如果你想在页面加载时也触发一次（不只是 userId 变化时），可以这样：

import { defineStore } from 'pinia'

import { userStore } from './user'

import { storeToRefs } from 'pinia'



export const cartStore = defineStore('cart', () => {

  const user = userStore()

  const { userId } = storeToRefs(user)

  

  watch(userId, (newId) => {

    if (newId) fetchCart(newId)

  }, { immediate: true })  // 加了这个配置，初始化时就会执行一次

  

  return { /* ... */ }

})

这几种方案都能解决你的问题，推荐用第一种 storeToRefs 的方式，代码最清晰。

问题在于你在 setup 函数里直接调用 userStore() 拿到的实例响应式会丢失。Pinia 的 setup 语法里要监听另一个 store，得用 storeToRefs 或者在 watch 回调里重新获取 store。

给你两种改法：

第一种，用 storeToRefs 保持响应式：

import { defineStore } from 'pinia'

import { userStore } from './user'

import { storeToRefs } from 'pinia'



export const cartStore = defineStore('cart', () => {

  const user = userStore()

  const { userId } = storeToRefs(user)  // 这里要用 storeToRefs 包装

  

  watch(userId, (newId) => {

    if (newId) fetchCart(newId)

  })

  

  return { /* ... */ }

})

第二种，更简单，直接在 watch 里调用：

import { defineStore } from 'pinia'

import { userStore } from './user'



export const cartStore = defineStore('cart', () => {

  watch(

    () => userStore().userId,  // 每次都重新获取最新的

    (newId) => {

      if (newId) fetchCart(newId)

    }

  )

  

  return { /* ... */ }

})

第二种写法更省心，不用担心响应式丢失的问题，我平时更喜欢这么写。

另外记得在 cartStore 里也声明 fetchCart 这个函数，或者直接调用外部的接口方法。