Vue3TypescriptComputedRef問題

我偶然發現了 Typescript 和 Vue3 的一些問題。我想我在這里錯誤地使用了 Typescript。

我使用 Vue 的 Composition API 為自己創建了一個商店。

import {computed, reactive} from "vue";

const state = reactive({
    accessToken: undefined,
    user: {},
})

const isAuthenticated = computed(() => {
    return state.accessToken !== undefined
})

export default {
    state: readonly(state),
    isAuthenticated
}

為它寫了一個型別/介面：

import {ComputedRef} from "vue";

export interface UserStore{
    state: Readonly<any>;
    isAuthenticated: ComputedRef<boolean>;
}

但是當我現在想在我的 vue 組件中使用它時。

像這樣例如：

<h1 v-if="userStore.isAuthenticated">is true</h1>

即使它顯然是假的，它也會回傳真。

我通過注入注入商店：

setup(){
    return {
      userStore: inject('userStore') as UserStore
    }
  }

當我想回傳一個計算（）字串時會出現類似的問題。當我在模板中使用它時，它用引號括起來。

這里有什么問題？

#edit 我在 main.ts 中提供了 UserStore

/* Stores */
import UserStore from './store/user-store'

const app = createApp(App)
  .use(IonicVue, {
    mode: 'ios'
  })
  .use(router)
.provide('userStore',UserStore);

router.isReady().then(() => {
  app.mount('#app');
});

uj5u.com熱心網友回復：

ref 是一個物件，因此userStore.isAuthenticated運算式始終為真。

當它們從 setup 函式回傳時，參考（包括計算）會自動解包到模板中。它應該是：

const userStore = inject('userStore') as UserStore
const { isAuthenticated } = userStore;

return {
  isAuthenticated
}

否則需要手動解包 ref：

<h1 v-if="userStore.isAuthenticated.value">is true</h1>

uj5u.com熱心網友回復：

如果你想在打字稿中創建一個計算屬性，你需要在方法之前添加一個 get 。

get isAuthenticated () {
    return state.accessToken !== undefined
)

制作型別介面

interface recordTypes {
    pDate: Date;
}

這是完整的例子

<template>
   
    <component
        v-if="componentName != ''"
        v-bind:is="componentName"
        v-on:updateConfirmationStatus="updateConfirmation"
    >
    </component>

   
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore, ActionTypes } from "../store";
import Toaster from "../helpers/Toaster";
import { reactive } from "vue";
import PatientConsultationService from "../service/PatientConsultationService";
import Confirmation from "../components/Confirmation.vue";
import { required } from "@vuelidate/validators";
import useVuelidate from "@vuelidate/core";
import { camelCase } from "lodash";
import moment from "moment";

interface recordTypes {
    pDate: Date;
}

@Options({
    components: {
        Confirmation
    }
})
export default class Assessments extends Vue {
    private recordList: recordTypes[] = [];
    private recordID = 0;
    private pService;
    private isCollapsed = true;
    private submitted = false;
    private toast;
    private componentName = "";
    private vuexStore = useStore();

    private state = reactive({
        weight: 0,
        height: 0,
        o2: 0,
        respiration: 0,
        temperature: 0,
        pressure: 0,
        pulse: 0
    });

    private validationRules = {
        weight: {
            required
        },
        height: {
            required
        },
        o2: {
            required
        },
        respiration: {
            required
        },
        temperature: {
            required
        },
        pressure: {
            required
        },
        pulse: {
            required
        }
    };

    private v$ = useVuelidate(this.validationRules, this.state);

    created() {
        this.pService = new PatientConsultationService();
        this.toast = new Toaster();
    }

    mounted() {
        this.loadList();
    }

    get patientID() {
        return this.vuexStore.getters.getReceiptID;
    }

    saveItem(isFormValid) {
        this.submitted = true;
        if (isFormValid) {
            this.pService
                .saveAssessment(this.state, this.patientID)
                .then(res => {
                    this.clearItems();
                    this.toast.handleResponse(res);
                    this.loadList();
                });
        }
    }

    clearItems() {
        this.state.weight = 0;
        this.state.height = 0;
        this.state.o2 = 0;
        this.state.respiration = 0;
        this.state.temperature = 0;
        this.state.pressure = 0;
        this.state.pulse = 0;
    }

    loadList() {
        this.pService.getAssessment(this.patientID).then(data => {
            const res = this.camelizeKeys(data);
            this.recordList = res.records;
        });
    }

    camelizeKeys = obj => {
        if (Array.isArray(obj)) {
            return obj.map(v => this.camelizeKeys(v));
        } else if (obj !== null && obj.constructor === Object) {
            return Object.keys(obj).reduce(
                (result, key) => ({
                    ...result,
                    [camelCase(key)]: this.camelizeKeys(obj[key])
                }),
                {}
            );
        }
        return obj;
    };

    get sortedRecords() {
        let sortedList = {};

        this.recordList.forEach(e => {
            const date = String(e.pDate);
            if (sortedList[date]) {
                sortedList[date].push(e);
            } else {
                sortedList[date] = [e];
            }
        });

        return sortedList;
    }

    formatDate(d) {
        const t = moment().format("YYYY-MM-DD");
        let fd = "";

        if (d == t) {
            fd = "Today "   moment(new Date(d)).format("DD-MMM-YYYY");
            this.isCollapsed = false;
        } else {
            fd = moment(new Date(d)).format("DD-MMM-YYYY");
            this.isCollapsed = true;
        }

        return fd;
    }

    deleteItem(id) {
        this.vuexStore.dispatch(
            ActionTypes.GET_RECEIPT_TITLE,
            "Are you sure to delete this"
        );
        this.componentName = "Confirmation";
        this.recordID = id;
    }

    updateConfirmation(b) {
        this.componentName = "";
        if (b.result) {
            this.pService.deleteAssessment(this.recordID).then(res => {
                this.toast.handleResponse(res);
                this.loadList();
            });
        }
    }
}
</script>

標籤：打字稿 Vue.js

上一篇：將基于類的jsuseState陣列轉換為typescriptHook問題

下一篇：正則運算式過濾器不包括“:”并包括至少一個單詞字符