在 Vue3 中访问代理对象 [英] Accessing a Proxy object in Vue3

问题描述

如何访问在 Vue.js 中抛出代理对象的获取响应.从字面上看，我在我的 Vue.js 组件中触发了一个方法，该方法调用连接我 Vuex 中的 getter 的计算函数，代码如下:

how can I access a fetch response throwing a Proxy Object in Vue.js. Literally I trigger a method in my Vue.js component that calls a computed function that connects a getter in my Vuex, on code would be like this :

METHOD IN COMPONENT

methods: {
    ...mapActions(["getAllUsers"]),


    async gettingAllusers() {
      const target = await this.getterGetAllUsers;
      console.log(target);
      return target;
    },
  },

COMPUTED IN COMPONENT

 computed: {
    ...mapGetters(["getterGetAllUsers"]),

    getterGetAllUsersFunction() {
      return this.$store.getters.getterGetAllUsers;
    },
  },

VUEX

const store = createStore({
  state() {
    return {
      userRegisteredState: true,
      allUsersState: {},
    };
  },

  mutations: {
    
   commit_get_all_users(state, payload) {
      state.allUsersState =  payload;
      console.log(state.allUsersState);
      return state.allUsersState;
    },
  },

  getters: {
    getterGetAllUsers(state) {
      console.log(state);
      console.log(state.allUsersState)
       return state;
    },
  },

  actions: {
   
    async getAllUsers({ commit }) {
      fetch(`${urlUser}/get/all/users`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((result) => {
          return result.json();
        })
        .then(async (result) => {
          await commit("commit_get_all_users",{...result});
          console.log(result);
        })
        .catch((error) => {
          console.log(error);
          error;
        });
    },
  },
});

export default store;

从字面上看，在我的组件中，触发了一个计算函数，该函数由同一组件上的方法调用，使用作为源数据的操作，该操作在状态中获取并提交该数据，以便由 getter 检索到在组件中使用这是我的结果，但我无法访问数据目标:

Literally in my component a trigger a computed function that is called by a method on the same component , using as source data an action that fetches and commit that data in the state in order to be retrieved by the getter so as to be used in the component This I s my result but I can't access the data target :

任何帮助都会很棒

推荐答案

如果您有嵌套代理，您应该能够使用 console.log({ ...myProxy }) 访问代理内容, 你也可以做一个 json stringify/parse

You should be able to access the proxy content using console.log({ ...myProxy }) if you have nested proxies, you could also do a json stringify/parse

const target = {
  message: "hello",
  nestedProxy: new Proxy({message:"nested"}, {}),
};

const proxy1 = new Proxy(target, {});

console.log(proxy1)
console.log({...proxy1})
console.log(JSON.parse(JSON.stringify(proxy1)))

这篇关于在 Vue3 中访问代理对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！