如何将Vuex Store中的变量传递给Apollo Query

我尝试将Vuex Store里的user.username传递给Apollo Query，模板中{{ user.username }}能正常显示，但在script部分打印user时，得到的是带特殊属性的响应式结构。直接使用字符串如username: "username"时查询可正常运行，试过computed()、JSON.stringify()等方法均无效。

期望的查询代码：

export default {
  setup() {
    ...

    const query = gql`
        query ($username: String) {
            ...
        }
    `;

    const variables = ref({
      username: /* 此处需填入user.username */,
    })

    const {result, loading, error} = useQuery(query, variables);

    return {
      user,
      result,
      loading
    }
  }
}

补充的home.vue代码：

<template>
  {{ user }}
</template>

<script>
import {useStore} from "vuex";
import {auth} from "@/firebaseConfig";
import {computed} from "vue";

export default {
  setup() {
    const store = useStore()

    auth.onAuthStateChanged(user => {
      store.dispatch("fetchUser", user);
    });

    const user = computed(() => {
      return store.getters.user;
    });

   console.log(user)

    return {
      user
    }
  }
}
</script>

console.log输出的user结构：

Object { _setter: setter(), dep: undefined, __v_isRef: true, __v_isReadonly: true, _dirty: true, effect: {…}, _cacheable: true }
__v_isReadonly: true
__v_isRef: true
_cacheable: true
_dirty: false
_setter: function setter()
...
_value: Proxy { <target>: {…}, <handler>: {…} }
  <target>: Object { loggedIn: true, data: {…} }
    data: Object { Username: "dxbh0517", … }
      Username: "dxbh0517"
      uid: "2JlznrpQk"
    loggedIn: true

模板{{ user }}输出：

{ "loggedIn": true, "data": { "Username": "username", "uid": "2JlznrpQk" } }

1. 正确读取computed值 #

user是computed返回的只读Ref对象，在script中必须通过.value访问实际值。同时注意你的store中用户数据结构是user.data.Username（首字母大写），并非user.username。

修改variables赋值：

const variables = ref({
  username: user.value?.data?.Username,
})

使用可选链?.避免用户未加载完成时出现报错。

2. 实现变量响应式更新 #

由于user是异步加载（来自Firebase的onAuthStateChanged），直接赋值的variables不会自动更新。需要用computed包裹variables，确保用户数据变化时Query能自动重新执行：

const variables = computed(() => ({
  username: user.value?.data?.Username,
}))

3. 完整示例代码 #

export default {
  setup() {
    const store = useStore()
    const auth = /* 你的Firebase auth实例 */

    auth.onAuthStateChanged(user => {
      store.dispatch("fetchUser", user);
    });

    const user = computed(() => store.getters.user);

    const query = gql`
      query ($username: String) {
        // 你的查询内容
      }
    `;

    // 用computed生成响应式变量
    const variables = computed(() => ({
      username: user.value?.data?.Username,
    }))

    const { result, loading, error } = useQuery(query, variables);

    return {
      user,
      result,
      loading,
      error
    }
  }
}

关键说明 #

• computed返回的是Ref对象，script中必须用.value访问实际值（模板会自动解包，无需手动添加）。
• 严格对应store中的属性路径：user.data.Username，注意首字母大写的Username。
• 用computed包裹variables，保证用户数据加载完成后，Query能自动获取最新变量并重新查询。

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