Accessing a Proxy object in Vue3

user_12037397 0
Viewed 17906

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;

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 :

enter image description here

Any help would be amazing

vuejs3 proxy
2 Answers

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)))

user_1975460

I know looks weird but, that works like a charm (even nested proxy).

   const purchase = JSON.parse(
      JSON.stringify(store.state.cases.purchase_case)
    );
user_103304680
Related