代码之家 › 专栏 › 技术社区 › rahulserver

Vue 3获取代理的值

vue-composition-api vuejs3 ionic-framework

0

rahulserver · 技术社区 · 4 年前

这是我的 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的价值。

那么,我在这里该怎么做呢?

0 回复 | 直到 4 年前

1

30

hermeslm 3 年前

获取代理的原始值有不同的方法:

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

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

2.拆除结构:

const rawObject = {...proxyObject};

3.对象符号:

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

4.(我推荐的方式)Vue 3 Reactibility实用程序函数,请参阅 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.

2

5

Daniel 4 年前

最简单的方法可能是使用JSON字符串化/解析

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

破坏结构( {..request} 或 Object.assign({}, request)) )有时也可以,但只有当你有一个单层代理时,stringify/parse才能对整个对象起作用(只要确保你没有任何循环对象值。

3

0

ktm5124 2 年前

您通常可以使用toString()方法获取Proxy对象的值。

const { createApp } = Vue

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

您还可以使用 toRaw 方法,但必须导入此方法。这个 toString 方法不必导入,所以它通常是最简单的。