Pinia를 사용해서 SpringBoot에서 받아온 데이터를 화면에 띄우기
1. NoticeStore.js(Pinia) 만들기
import axios from "axios";
import { defineStore } from "pinia";
export const useNoticeStore=defineStore("noticeStore",{
id:"noticeStore",
state:()=>({
notice:"",
content:""
}),
getters:{
},
actions:{
async fetchReceiveNoticeList(){
return axios.get('api/notice/AllNotice',this.notice)
}
}
})
JavaScript
복사
2. Main.js 에 NoticeStore 등록하기
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { router } from '@/router'
import noticeStore from '@/store/noticeStore'
const pinia = createPinia()
createApp(App)
.use(router)
.use(noticeStore)
.use(pinia)
.mount('#app')
JavaScript
복사
3. noticeList.vue에서 NoticeStore 사용하기
<template>
<noticeLists>
<template #contents>
<div class="noticeListHead">
공지사항
<div class="noticeLists" v-for="notice in this.AllNotice" >
{{notice.content}}<hr>
</div>
</div>
</template>
</noticeLists>
</template>
<script>
import noticeLists from '../../components/modal/ModalFormA.vue';
import {useNoticeStore} from '@/store/noticeStore';
export default {
data:function(){
return{
test:"",
AllNotice:""
}
},
setup(){
const noticeStore = useNoticeStore();
return {
noticeStore
}
},
beforeCreate() {
console.dir("beforeCreate");
this.test= this.noticeStore.fetchReceiveNoticeList();
this.test.then(async (result)=>{
this.AllNotice= await result.data;
})
},
created(){
console.dir(this.AllNotice);
},
name: 'NoticeList',
components: {
noticeLists
}
}
</script>
<style>
@import "../../assets/css/noticeList.css";
</style>
JavaScript
복사
4. 실행 화면
Mysql에 저장되어있는 데이터중 content만 v-for를 통해서 보여주었다.
문제점 v-bind:key를 사용하라는 error메시지가 뜬다. 이것이 없어도 실행은 되지만, error메시지도 차근히 고치도록하겠다.
