Vue / Nuxt 提供只读对象 desen\'t work

Question

我想提供反应对象作为只读如下所示。

    // parent component

        const test = ref({ test: 'test' })
        provide('test', readonly(test))

然后我认为当我注入它时应该是只读的。

// child component

const test = inject('test')

test.value = 'changed!' // should be error

但实际上这不是错误。此代码不会在浏览器上显示任何错误消息。

有什么方法可以提供在子组件上只读的反应对象？

如果有人知道这个解决方案，请给我们答案。

- - - 附加信息 - - - - - - 我也在本文档中尝试此代码。 https://vuejs.org/api/reactivity-core.html#readonly 这就像下面说的，实际上我的 Veture 在 VScode 上警告过它，但它被计数了。

// mutating the copy will fail and result in a warning
copy.count++ // warning!

该链接是 Vue 的文档，但我正在使用 '@nuxtjs/composition-api' ，这可能是一个原因......？

我还查看了这篇文章this article。但我仍然能够更改子组件中的注入对象。

Answer 1

你的方法有一些问题。首先，you should use reactive() 在创建响应式对象时代替 ref()。 其次，当您注入对象时，您应该通过指定正确的键来访问该值。在您的情况下，关键是“测试”。

test.test = 'changed!'

通过这样做，仍然没有错误，然而初始值保持不变。这是因为readonly() 返回了一种特殊的proxy object，它返回的值不受上述赋值的影响。

test.test = 'changed!'
console.log(test.test) // prints 'test'

---

补充说明：

你的代码可以通过destructing注入的对象来改进

const { test } = inject('test')
test.value = 'changed!' // eslint will catch an error: 'test' is constant

您可以对较大的对象遵循相同的模式

const largerObject = {first: 'value 1', second: 'value 2', third: 'value 3'}
const {first, second, third } = largerObject

console.log(first === 'value 1') // true
console.log(second === 'value 2') // true
console.log(third === 'value 3') // true

您还应该避免对对象名称、其键和分配给它的值使用相同的字符串，因为这会使调试更加困难。例如，您可以编写：

   const food = reactive({ ingredient: 'sauce' })