Vue 3 获取代理的值答案

【问题标题】：Vue 3 get value of a proxyVue 3 获取代理的值
【发布时间】：2021-06-28 18:06:02
【问题描述】：

这是我的RequestList.vue 组件

<template>
  <ion-item v-for="request in requests" @click="showRequest(request)" :key="request.id"
            text-wrap>
    <ion-label>
      <b>Name:</b> {{ request.event.name }}
      <br>
      <b>Venue:</b>{{ request.event.venue.name }}
      <br>
      <b>Date:</b> {{ request.event.date }}
    </ion-label>
  </ion-item>
</template>

<script>
import {useRouter} from 'vue-router'
import {IonItem, IonLabel} from '@ionic/vue'
import store from '@/store';
export default {
  components: {
    IonLabel,
    IonItem
  },
  props: {
    requests: Array
  },
  setup(props) {
    const router = useRouter()
    const showRequest= (request)=> {
      console.log('request', props.request);
      store.requests.setRequest(props.requests);
    };
    return {router, showRequest}
  }
}
</script>

我的store/modules/requests.js 文件

import {computed, ref} from "vue";

const state = ref({
  request: null
});

export function setRequest(request) {
  state.value.request = request;
}

export const getRequest = computed(() => state.value.request);

我正在使用RequestList.vue 的Requests.vue 组件

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar></ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding-start ion-padding-end">
      <ion-list-header>
        <ion-label>
          <b>Requests</b>
        </ion-label>
      </ion-list-header>
      <div v-if="!loading">
        <request-list :requests="requests" />
      </div>
      <div v-else>
        <ion-spinner class="spin"></ion-spinner>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
import { defineComponent } from 'vue'
import { IonContent, IonHeader, IonLabel, IonListHeader, IonPage, IonSpinner, IonToolbar } from '@ionic/vue'
import { reactive, toRefs } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import RequestList from '../components/RequestList'
import firestoreService from '@/services/firestore'

export default defineComponent({
  components: {
    IonContent,
    IonPage,
    IonLabel,
    IonHeader,
    IonSpinner,
    IonToolbar,
    IonListHeader,
    RequestList
  },
  setup() {
    const state = reactive({
      requests: [],
      loading: false
    })

    onMounted(async () => {
      state.loading = true
      try {
        state.requests = await firestoreService.getClaimableRequestsForCurrentUser()
      } catch (e) {
        console.log('error occurred fetching requests for current user', e)
      } finally {
        state.loading = false
      }
    })
    return {
      ...toRefs(state),
    }
  }
})
</script>

我的问题是，在上面的 RequestList.vue 中，showRequest 处理程序正在发送 request 作为代理参数。这就是store.requests.setRequest(props.requests) 在商店中设置代理的原因。而我需要 props.requests 的值。

那么我该怎么做呢？

【问题讨论】：

标签： ionic-framework vuejs3 vue-composition-api

【解决方案1】：

获取代理的原始值有多种方法：

1.使用 JSON 字符串化/解析：

const rawObject = JSON.parse(JSON.stringify(proxyObject));

2。解构：

const rawObject = {...proxyObject};

3。 Object.assign：

const rawObject = Object.assign({}, proxyObject);

4. （我推荐的方式）Vue 3 Reactivity utils 函数，见Reactivity API：

import { isProxy, toRaw } from 'vue';
if(isProxy(proxyObject)){ //this If() block is not really necessary
  const rawObject = toRaw(proxyObject)
}
//But it is not recommended to hold a persistent reference to the original object. Use with caution.

【讨论】：

感谢您指出 Vue api，帮了大忙！

【解决方案2】：

最简单的方法可能是使用 JSON stringify/parse

    const showRequest = (request)=> {
      const reqObject = JSON.parse(JSON.stringify(request));
      console.log('request', reqObject);
      store.requests.setRequest(reqObject);
    };

解构（{..request} 或 Object.assign({}, request))）有时也有效，但前提是你有一个代理级别，而字符串化/解析将在整个对象上工作（只要确保你没有任何循环对象值。

【讨论】：