vue3 vuex 4.X getters 打印结果是proxy对象，应该怎样获取其中的值。

发布于 2022-09-12 22:13:13 字数 437 浏览 25 评论 0

我在入口文件main.ts中写了个权限判断，不是在composition api中的问题，然后在调用getters的时候，发现打印出来的值是proxy对象，对这个不熟悉，网上看的教程也一知半懂，一头雾水，请问如何调用其中的值。
代码大致如下：

import store from "./store";
const hasRoles = store.getters.roles && store.getters.roles.length > 0;
console.log("hasroles", hasRoles, store.getters.roles);

打印的结果如下：

看起来标红的地方应该是赋值成功的，但是是proxy对象，不知道如何取出来值来做判断。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深居我梦 2022-09-19 22:13:13

里面那个 [[Target]] 就是真实对象。

回复收藏 0

终弃我 2022-09-19 22:13:13

依然没有解决调用proxy的问题。我想可能是无法调用的。而我调用的其实是vue3 createStore() proxy后的getters对象，而非原型对象。官方示例有在composition api内调用getters的方法，就是用useStore()，但如果在入口文件内调用useStore()为空，这个我也不知道为什么。
而测试过后发现，如果是简单的int number （boolean这个没试验），vuex4.x 经过state定义， mutations赋值后，并没有变成proxy对象。而对象定义并赋值后，就会转变成proxy。
而且有如下特点：

const roles = store.getters.roles
console.log(roles)  //打印结果如顶楼问题中的图片
console.log(roles.name) //"permission"
console.log(roles.meta) //又一个proxy

这样能看到我们其实能自己写一个方法取出来proxy内的原型对象，但是感觉好麻烦啊。
然后虽然我没找到得到proxy对象调用原对象的方法，但是却找到了另外方法进行转换。
vue3中带了个toRaw的api，原本是搭配reactive api使用的，我用在这里试验了一下。

const rolesRaw = toRaw(store.getters.roles)
console.log(rolesRaw) //可以看到打印出来原型对象

PS：第一次用思否，发现没有补充问题的功能。回一下meathill老师的话。可能老师没明白。我知道[[target]]里是原型对象，我是想知道，怎么吧[[target]]里的值取出来赋值，就是说取出来原型对象。
我再举例说明一下。
我写了个小控件。

export default(){
    beforeMount() {
    console.log(this);
    window.addEventListener("resize", this.methods.resizeHandler);
    },
}
methods省略了啊。

可以看到打印结果是

是vue3的一个实例，也是proxy对象。

可以看到$options里有我定义好的方法。
然后我调用options api获取其中methods。

console.log(this.$options)

编辑器直接报错。

然后再

console.log(this.methods)

编辑器不报错了，但是却是undefined。
我就是想this.methods.来调用我自己定义好的方法。
我刚自己回答了composition api提供的toRaw将reactive的proxy对象转换为原型对象，但是vue官方的建议是要慎重使用，所以想了解一下有没什么其他的方法，或者说我最初设计的思路就是错误的。

回复收藏 0