在 Vue3 中访问代理对象答案

【问题标题】：Accessing a Proxy object in Vue3在 Vue3 中访问代理对象
【发布时间】：2021-06-10 18:55:05
【问题描述】：

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

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 检索以便在组件中使用这是我的结果，但我无法访问数据目标：

任何帮助都会很棒

【问题讨论】：

代理不是问题，因为它不会改变您访问数据的方式。您应该描述您遇到的代码问题
你说“无法访问数据目标”是什么意思？登录后会发生什么？
在 [[Target]] 中包含所有数据，但我如何访问它？，我试图分解 getter 的代理对象结果，但数据与图像中的数据保持一致，无法访问它
像这样：console.log(state.allUsersState);你看到了什么？
一个空代理，为什么要带整个状态对象

标签： proxy vuejs3

【解决方案1】：

我知道这看起来很奇怪，但是，它就像一个魅力（甚至是嵌套代理）。

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

【讨论】：

【解决方案2】：

如果您有嵌套代理，您应该能够使用console.log({ ...myProxy }) 访问代理内容，您也可以执行 json 字符串化/解析

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

【讨论】：

很奇怪，但分解代理然后我会为我的第一个项目接收代理，我的意思是：{ allUsersState: Proxy, userRegisteredState: true}
你可以在另一个代理中嵌套一个代理，在这种情况下你也可以循环和解构它们，但是 JSON.stringify 和 JSON.parse 也会转换它们
Object.keys(myProxy) 也可以，这对我来说感觉有点简单。令人沮丧的是，他们没有正确地将 Array 等原语的预期功能代理到其固有对象，希望他们最终能解决这个问题。