如何将变量从商店传递到apollo查询

Question

我正在尝试将存储中的变量传递到阿波罗查询中，但我找不到正确的方法。我尝试使用的变量是

 user.username

，如果我在模板部分中执行

{{ user.username }}

，它会打印，但在脚本部分中

user

输出为奇怪的 Json 类型。 所以理想情况下我希望我的查询像这样工作：

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
    }
  }

我尝试使用compute()或Json.stringify以及大约十几个其他随机的东西，但没有任何效果。查询本身没有任何问题，因为如果我使用像

username: "username"

这样的字符串，查询就可以正常工作。

希望我在解释事情方面做得不错。预先感谢

---

编辑： 奇怪的 JSON 事情： 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>

输出（控制台.log）

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()
​
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"
​​​​
<prototype>: Object { … }
​​​
loggedIn: true
​​​
<prototype>: Object { … }
​​
<handler>: Object { get: get2(target, key, receiver), set: set2(target, key, value, receiver), deleteProperty: deleteProperty(target, key), … }
​
dep: Set [ {…} ]
​
effect: Object { fn: user(), scheduler: effect(), active: true, … }
​
<prototype>: Object { … }
Challenge.vue:30:12

​
dep: Set [ {…} ]
​
effect: Object { fn: user(), scheduler: effect(), active: true, … }
​
<prototype>: Object { … }

输出（{{用户}}）：

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

Answer 1

我有疑问如果 _dirty 等于 true 会发生什么？ 对我来说 _dirty = true 我无法输入值