개발냥발

import { defineStore } from 'pinia'; import { ref } from '@vue/reactivity'; export const IndexStore = defineStore('IndexStore', () => { const isLogin = ref(false); // login true or false return { isLogin, }; }, { persist: true }); 새로고침을 해도 로그인 상태를 유지해야한다. 그래서 알아본게 vuex-persistedstate다. 그런데 이렇게 빨간 글씨로 경고문구가 있으면 사용하지 않는 것이 안전하다고 생각되어 한참 고민하다가 알게되었다. pinia-plugin-persistedstate-2 간단히 설명하자면 store에 있..

새로고침 시 상태 유지하려고 Vuex 공부하려는데 상태 관리 라이브러리를 Pinia로 바꿨다고 한다. 참고링크 일단 도전 정신으로 설치해보자! App.vue에서 sotre 사용할 때는 //App.vue import { indexStore } from '@/store/index'; export default { setup () { const store = indexStore(); return { store } }; } import할 때 사용한 indexStore는 맘대로 바꿀 수 있다. 단, store에 있는 변수명과 composition api에서 사용하는 이름이 같아야 한다. 공식문서

어쩌다보니 전체화면 코드가 필요하여 알아보게 되었다. 특정 엘리먼트만 전체화면으로 만들 수 있다는걸 몰랐는데 구글링하다 게시글을 보고 알게 되었다. 상위 컴포넌트에서 버튼을 클릭하면 boolean값이 변경된다. 하위컴포넌트에서 props로 받아 watch로 변경값이 있을 경우 이미지만 전체화면을 만드는 코드이다. App.vue Full Screen Home.vue Full Screen git