在globalProperties上挂载的响应式属性，在template中必须使用.value获取

[anchogin]

在vue3可以挂载一个全局属性app.config.globalProperties，但是当这个属性是响应式的，在template中使用的时候需要.value才能获取，有什么办法可以规避.value吗，在data，或prop中的是不需要.value，那位大神可以帮忙解惑

[liulinboyi]

If you want to auto unref, I suggest use:

https://vueuse.org/shared/resolveUnref/

import { resolveUnref } from '@vueuse/core'

const foo = ref('hi')

const a = resolveUnref(0) // 0
const b = resolveUnref(foo) // 'hi'
const c = resolveUnref(() => 'hi') // 'hi'

Or

...
const app = createApp(App)
app.config.globalProperties = reactive({ msg: ref('hello') })
...

let the globalProperties is a Reactivity value.

[anchogin]

第二种方法能达到我想要的效果，但是我的值的来源是pinia的state，比如：

import { defineStore } from "pinia";
const xxStore = defineStore("xxStore", {
  state: (): UserType => ({
    user: {name: "Lili"}
  })
});

using1:

import { xxStore } from "@/store";

const app = createApp(App);
const xx = xxStore();
const { user } = toRefs(xx);
app.config.globalProperties.user = user;
app.mount("#app");

这种需要通过value获取{{ user.value.name }}

using2:

import { xxStore } from "@/store";

const app = createApp(App);
const xx = xxStore();
app.config.globalProperties.user = xx.user;
app.mount("#app");

pinia的store是reactive的，但是里面的state并不是，所以可以通过 {{ user.name }} 获取，但不是响应式

using3:

import { xxStore } from "@/store";
import {storeToRefs} from "pinia";

const app = createApp(App);
const xx = xxStore();
const { user } = xx;
app.config.globalProperties.user = user;
app.mount("#app");

这种结构出来的state可以通过 {{ user.name }} 获取但不是响应式

using4:

import { xxStore } from "@/store";
import {storeToRefs} from "pinia";

const app = createApp(App);
const xx = xxStore();
const { user } = storeToRefs(xx);
app.config.globalProperties.user = user;
app.mount("#app");

这种转换的state还是ref，需要通过value获取， {{ user.value.name }}

所以以上都无法满足我的需求，我想要的是直接使用xxStore的state属性，像你所说的使用reactive一样

不知道有没有其他办法可以实现，谢谢你的回复，非常感谢😀

[liulinboyi]

第二种方法能达到我想要的效果，但是我的值的来源是pinia的state，比如：

import { defineStore } from "pinia";
const xxStore = defineStore("xxStore", {
  state: (): UserType => ({
    user: {name: "Lili"}
  })
});

using1:

import { xxStore } from "@/store";

const app = createApp(App);
const xx = xxStore();
const { user } = toRefs(xx);
app.config.globalProperties.user = user;
app.mount("#app");

这种需要通过value获取{{ user.value.name }}

using2:

import { xxStore } from "@/store";

const app = createApp(App);
const xx = xxStore();
app.config.globalProperties.user = xx.user;
app.mount("#app");

pinia的store是reactive的，但是里面的state并不是，所以可以通过 {{ user.name }} 获取，但不是响应式

using3:

import { xxStore } from "@/store";
import {storeToRefs} from "pinia";

const app = createApp(App);
const xx = xxStore();
const { user } = xx;
app.config.globalProperties.user = user;
app.mount("#app");

这种结构出来的state可以通过 {{ user.name }} 获取但不是响应式

using4:

import { xxStore } from "@/store";
import {storeToRefs} from "pinia";

const app = createApp(App);
const xx = xxStore();
const { user } = storeToRefs(xx);
app.config.globalProperties.user = user;
app.mount("#app");

这种转换的state还是ref，需要通过value获取， {{ user.value.name }}

所以以上都无法满足我的需求，我想要的是直接使用xxStore的state属性，像你所说的使用reactive一样

不知道有没有其他办法可以实现，谢谢你的回复，非常感谢😀

Have a try use like this:

import { xxStore } from "@/store";
import {storeToRefs} from "pinia";
import { reactive } from "vue"

const app = createApp(App);
const xx = xxStore();
const { user } = storeToRefs(xx);
app.config.globalProperties = reactive({user});
app.mount("#app");

[anchogin]

谢谢，确实是这样，这完美的解决了我的问题👍