vue3 和 typescript 可组合项以及返回数组值

Question

使用Vue2很长时间后刚接触Vue3。我有一个返回对象数组的可组合文件。在浏览器开发工具中，我可以看到我的变量加载了正确的数据。但是，每当我尝试对此数组进行过滤时，都会收到错误“favorites.filter 不是函数”。我访问数组变量的唯一方法似乎是访问“rawValue”，这似乎不正确。我做错了什么？

可组合：

import {onMounted, ref, watch} from 'vue';
import {Preferences} from "@capacitor/preferences";
import {useStore} from "@/store";

export const userFavorites = () => {

const FAVORITE_ARTISTS = 'favorites';
const favorites = ref({});
const store = useStore();

function addFavorite(artist, saved) {

    let payload = {
        artists: [artist],
        isFavorite: saved
    }

    store.dispatch({
        type: 'updateUserFavorites',
        payload
    });

    favorites.value.push(artist);
}

const loadFavorites = async () => {
    const favoriteList = await Preferences.get({key: FAVORITE_ARTISTS});

    const favoriteResults = favoriteList.value ? JSON.parse(favoriteList.value) : [];

    favorites.value = favoriteResults;
};

const cacheFavorites = () => {
    Preferences.set({
        key: FAVORITE_ARTISTS,
        value: JSON.stringify(favorites.value),
    });
};

onMounted(loadFavorites);
watch(favorites.value, cacheFavorites);

return {
    favorites,
    addFavorite
};
}

myfile.vue：

<script lang="ts" setup>
import {computed, ref} from "vue";
import RegisterToolbar from "@/components/RegisterToolbar.vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/store";
import {bookmarkOutline, bookmark} from 'ionicons/icons';
import {userFavorites} from '@/composables/userFavorites';
const {addFavorite, favorites } = userFavorites();

import {
  IonButton,
  IonBackButton,
  IonButtons,
  IonPage,
  IonIcon,
  IonContent,
  IonLabel,
  IonAvatar,
  IonCard,
  IonGrid,
  IonRow,
  IonCol,
  IonList,
  IonItem,
  IonCardHeader,
  IonChip,
  IonCardContent,
  IonSearchbar,
} from "@ionic/vue";

const store = useStore();
const router = useRouter();

const artists = computed(() => store.getters.getArtists);
const user = computed(() => store.getters.getUser);    
const route = useRoute();

function isFavorite(artist) {
  return favorites._rawValue.filter((favorite) => {
    return favorite.id === artist.id;
  }).length > 0;
}

const navigate = (url: string) => {
  router.push(url);
}
</script>

Answer 1

您的变量

favorites

不是数组。您将其初始化为对象。

const favorites = ref({});

->

const favorites = ref([]);

您需要相应地调整您的代码。

过滤方法

希望有帮助！ :)