如何访问 `setup` 的内部状态而不通过`data` 暴露它？答案

【问题标题】：How to access `setup`'s inner state without exposing it via `data`?如何访问 `setup` 的内部状态而不通过`data` 暴露它？
【发布时间】：2021-08-12 00:13:35
【问题描述】：

这个问题是针对setup返回渲染函数的。

例如，我有一个组件Foo：

// Foo.tsx
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    // ???? how to access `number` outside the `Foo` Component?
    const number = ref(0)

    return () => <div>{number.value}</div>
  },
})

我们是否必须使用data 来公开number？例如：

// Foo.tsx
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  data() {
    return {
      // ???? expose `number` to the outside
      number: 0,
    }
  },
  setup() {
    return () => <div>{getCurrentInstance()?.data.number}</div>
  },
})

// FooContainer.tsx
import Foo from '@/views/Foo'
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const foo = ref<InstanceType<typeof Foo>>()
    //                          ???? use `Foo`'s `number` in `FooContainer`
    onMounted(() => console.log(foo.value?.number))

    return () => <Foo ref={foo} />
  },
})

那么，有没有其他方法可以访问Foo 的setup 的内部状态number 而无需通过data 暴露它？

【问题讨论】：

问题是特定于render函数的使用，不是吗？这个问题没有明确解释这一点。否则似乎没有问题，实例只是从设置中返回。
@EstusFlask 对不起，我错过了。是的，它特定于渲染函数的使用。这种情况下，在data中不声明number，外部可以访问Foo的setup的内部状态number吗？
你真正的用例是什么？
@BoussadjraBrahim 例如，制作一个切换VTable 的loading 状态的util 函数，但如果loading 没有从data 暴露出来，我发现无法控制它从外面。

标签： typescript vue.js vuejs3 vue-composition-api tsx

【解决方案1】：

您可以定义一个名为 useLoader 的可组合函数：

useLoader.ts：

import { ref } from 'vue'

const loading = ref(false)

export default function useLoader() {
  return {
    loading,
  }
}

然后在Foo.tsx 中使用它就像：

import { defineComponent, getCurrentInstance } from 'vue'
import useLoader from './userLoader'

export default defineComponent({
  setup() {
    const { loading } = useLoader()

    return () => <div>{loading.value && <div> Loading ... </div>}</div>
  },
})

FooContainer.tsx

import Foo from '@/views/Foo'
import { defineComponent, onMounted, ref } from 'vue'
import useLoader from './userLoader'

export default defineComponent({
  setup() {
    const { loading } = useLoader()

    onMounted(() => console.log(loading.value))

    return () => <Foo />
  },
})

【讨论】：

【解决方案2】：

您可以使用设置中提供的expose 方法将您的数据公开给其他组件，

// Foo.tsx
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(props, { expose }) {
    // ? how to access `number` outside the `Foo` Component?
    const number = ref(0)

    expose({
        number
    })

    return () => <div>{number.value}</div>
  },
})

【讨论】：

你是怎么找到这个的，它甚至没有记录：O.
我遇到了同样的问题，哈哈。所以我只是玩了一下。检查提供的设置并最终找到expose。但是，是的，不知道为什么它没有记录在案。
对应的RFC：github.com/vuejs/rfcs/pull/210