我在入口文件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对象,不知道如何取出来值来做判断。
里面那个 [[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省略了啊。
可以看到打印结果是
是vue3的一个实例,也是proxy对象。
可以看到$options里有我定义好的方法。
然后我调用options api获取其中methods。
console.log(this.$options)
编辑器直接报错。
然后再
console.log(this.methods)
编辑器不报错了,但是却是undefined。
我就是想this.methods.来调用我自己定义好的方法。
我刚自己回答了composition api提供的toRaw将reactive的proxy对象转换为原型对象,但是vue官方的建议是要慎重使用,所以想了解一下有没什么其他的方法,或者说我最初设计的思路就是错误的。