如何从计算属性中获取值？答案

【问题标题】：How to get value from computed properties?如何从计算属性中获取值？
【发布时间】：2022-08-18 23:39:28
【问题描述】：

我在返回状态的状态管理（存储）中使用组合 API添加日历.然后我使用返回的计算属性将变量添加到日历getAddtocalender我在状态管理中声明的方法，但是当我想获取 addtocalender 值时组件.app我想放进去配置变量它永远不会返回值。

我尝试运行console.log(addtocalender.vale.name，结果是undefined。

如何获得 addtocalender 价值？

store.js

import { reactive, readonly } from \'vue\';
import axios from \'axios\';

const state = reactive({
    addtocalender: [],
});

const mutations = {
    updateAddtocalender: (payload) => state.addtocalender = payload,
}

const actions = {
    getAddtocalender: () => {
      return axios.get(\'http://localhost:3000/addtocalender\').then((response) => {
        mutations.updateAddtocalender(response.data);
      });
    },
};

export default {
  state: readonly(state),
  mutations,
  actions
};

component.vue

<script setup>
import { onMounted, ref, inject, computed, watchEffect } from \"vue\";

const store = inject(\'store\');

const addtocalender = computed(() => store.state.addtocalender);

store.actions.getAddtocalender();

const config ={
    # i want to put addtocalender value here
    name: addtocalender.value.name,
    startDate: addtocalender.value.startDate,
};

</script>

addtocalender.json

{
    \"name\":\"Reminder to star the add-to-calendar-button repo\",
    \"description\":\"Check out the maybe easiest way to include add-to-calendar-buttons to your website:\\n→ [url]https://github.com/jekuer/add-to-calendar-button|Click here![/url]\",
    \"startDate\":\"2022-08-14\",
    \"location\":\"World Wide Web\",
    \"label\":\"Simpan ke kalender!\",
    \"startTime\":\"10:13\",
    \"endTime\":\"12:57\",
    \"options\":[
        \"Google\",
        \"Apple\",
        \"iCal\",
        \"Yahoo\",
        \"Outlook.com\",
        \"Microsoft365\"
    ],
    \"timeZone\":\"Asia/Jakarta\",
    \"trigger\":\"click\",
    \"iCalFileName\":\"Reminder-Event\"
}

标签： vuejs3 vue-composition-api computed-properties

【解决方案1】：

解决了..

我使用await，这是我代码的改进。

<script setup>
import { onMounted, ref, inject, computed, watchEffect } from "vue";

const store = inject('store');

const addtocalender = computed(() => store.state.addtocalender);

# use here
await store.actions.getAddtocalender();

const config ={
    # i want to put addtocalender value here
    name: addtocalender.value.name,
    startDate: addtocalender.value.startDate,
};

</script>

【讨论】：