Ionic Vue 3获取代理的值

qpgpyjmq 于 2022-12-08 发布在 Ionic

关注(0)|答案(3)|浏览(171)

下面是我的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);

我的Requests.vue元件，其中我使用RequestList.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作为param发送，这是一个代理。这就是为什么store.requests.setRequest(props.requests)在存储中设置一个代理。而我需要props.requests的值。
那我在这里怎么做呢？

ionic-framework

来源：https://stackoverflow.com/questions/66909638/vue-3-get-value-of-a-proxy

3条答案

按热度按时间

ig9co6j11#

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

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

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

2.资产重组：

const rawObject = {...proxyObject};

3.对象分配：

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

4.（我推荐的方式）Vue 3React性实用程序函数，请参见React性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.

赞(0）回复(0）举报 2022-12-08

bgtovc5b2#

最简单的方法可能是使用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))）有时候也能工作，但只有当你有一个单一级别的代理时，而stringify/parse将对整个对象工作（只要确保你没有任何循环的对象值。

赞(0）回复(0）举报 2022-12-08

aamkag613#

您通常可以使用toString（）方法取得Proxy对象的值。

const { createApp } = Vue

createApp({
    data() {
        return {
            var: "hello world"
        }
    }, 
    mounted() {
        if (var.toString() == "hello world") {
            alert("Success");
        }
    }
}).mount("#app");

你也可以使用toRaw方法，但是这个方法必须被导入。toString方法不需要被导入，所以它通常是最简单的。

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic Vue 3获取代理的值

3条答案

相关问题

热门标签

最新问答