인프런 커뮤니티 질문&답변

piniaData.js

import { defineStore } from 'pinia';
import { fetchAskList, fetchJobsList, fetchNewsList, fetchUserInfo, fetchItem, fetchList } from '../api/index';

export const usePiniaStore = defineStore('listData', {
    state: () => {
        return {
            news: [],
            ask: [],
            jobs: [],
            user: {},
            item: {},
            loading: true,
            list: [],
        }
    },
    getters: {
        fetchedNews(state) {
            return state.news
        },
        fetchedAsk(state) {
            return state.ask
        },
        fetchedJobs(state) {
            return state.jobs
        },
        fetchedUser(state) {
            return state.user
        },
        fetchedItem: (state) => state.item,
        fetchedList: (state) => state.list
    },
    actions: {
        async FETCH_NEWS(){
            try {
                this.loading = true;
                const res = await fetchNewsList();

                this.news = res.data;
                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_ASK(){
            try {
                this.loading = true;
                const res = await fetchAskList();
                this.ask = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_JOBS(){
            try {
                this.loading = true;
                const res = await fetchJobsList();
                this.jobs = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_USER(id){
            try {
                this.loading = true;
                const res = await fetchUserInfo(id);
                this.user = res.data;

                return res;
            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_ITEM(id){
            try {
                this.loading = true;
                const res = await fetchItem(id);
                this.item = res.data;

                return res;

            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
        async FETCH_LIST(pageName){
            try {
                this.loading = true;
                const res = await fetchList(pageName);
                this.list = res.data;
                return res;

            }catch(error){
                console.error(error);
            }finally{
                this.loading = false;
            }
        },
    }
})

CreateListView.js

import { h } from 'vue';

import ListView from './ListView';
import { useRoute } from 'vue-router'
import { usePiniaStore } from '../store/piniaData'

export default function createListView(componentName) {
    return {
        name: componentName,
        setup() {
            // store 를 쓰기위함
            const store = usePiniaStore();
            // store에 우리가 만든 state를 사용하고, api요청 함수를 사용하기 위해 
            const { FETCH_LIST } = store;
            const routeName = useRoute().name;

            FETCH_LIST(routeName).
            then(() => {
                console.log('fetched')
            });

            return { routeName }

        },
        render() {
            // ListView 컴포넌트를 렌더링하는 렌더링 함수
            return h(ListView);
        }
    }
}

로 작성을 해서 기능은 다 작동하는데요...

콘솔창에
[Vue warn]: Property "name" was accessed during render but is not defined on instance.

at <ListItem>

at <ListView>

at <NewsView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {_pStores: {…}, …} > >

at <BaseTransition appear=false persisted=false mode=undefined ... >

at <Transition name="page" >

at <RouterView>

at <App>

에러가 계속나오는데 어떻게 해결할 수 있는지 알 수 있을까요?