[Vue.js 3] 스토어에 있는 배열을 화면에 보여주기

어렵지 않다.

초간단!

 

참고로 vuex가 아닌 pinia 사용 중임.

 

1. store/save.js 파일을 만들었다.

import { defineStore } from 'pinia';
import { ref } from '@vue/reactivity';

export const SaveSotre = defineStore('SaveSotre', () => {
    const saveInfo = ref([])
    return {
        saveInfo
    };
}, {
    persist: true
});

 

 

 

2. views/Main.vue 작성

템플릿

<template>
    <div class="Main">
        <div v-for="(item, index) in saveSotre.saveInfo" :key="index">
            <span>{{item.name}}</span>
        </div>
    </div>
</template>

 

스크립트

<script>
    import { LoginStore } from '@/store/login';
    import { SaveSotre } from '@/store/save';

    export default {
        name: 'Main',
        setup () {
            const saveSotre = SaveSotre()


            return {
                saveSotre,
            }
        }
    }
</script>

 

 

 

끝!