问答

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

作者:admin 2021-05-06 我要评论

我在入口文件main.ts中写了个权限判断,不是在composition api中的问题,然后在调用getters的时候,发现打印出来的值是proxy对象,对这个不熟悉,网上看的教程也...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我在入口文件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);

打印的结果如下:
image
看起来标红的地方应该是赋值成功的,但是是proxy对象,不知道如何取出来值来做判断。

###

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

###

依然没有解决调用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省略了啊。

可以看到打印结果是
image
是vue3的一个实例,也是proxy对象。
image
可以看到$options里有我定义好的方法。
然后我调用options api获取其中methods。

console.log(this.$options)

编辑器直接报错。
image
然后再

console.log(this.methods)

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue3 vuex 4.X getters 打印结果是prox

    vue3 vuex 4.X getters 打印结果是prox

  • 如何禁止项目根目录自动生成.eslintcac

    如何禁止项目根目录自动生成.eslintcac

  • typescript怎么定义回调函数的参数,es

    typescript怎么定义回调函数的参数,es

  • #echarts #力引导图  #力引导图怎么获

    #echarts #力引导图 #力引导图怎么获

腾讯云代理商
海外云服务器