vue (vuex) (store)

생명주기가 반응하기 위해서는 (F5, refresh가 수행됨)
이를 vuex로 다른화면에서 app.vue를 반응시켜서 실시간으로 작동하도록 만든다.

1. vuex 모듈 설치

-- store 사용

CMD> npm install vuex@next --save

2. store 파일 만들고 main.js에 사용등록하기

import stores from './stores/index.js';
const app = createApp(App);
app.use(stores);
app.mount('#app');

3. store 작성

import { createStore } from 'vuex';

export default createStore({

    // 상태변수
    // 공통적으로 써야하는 변수
    state:{
        logged : false,
    },

    // getter => App.vue
    getters: {
        getLogged(state){
            return state.logged;
        }
    },

    // mutations => Login.vue에서 사용, logout.vue에서 사용
    mutations:{
        setLogged(state, value){
            state.logged = value;
        }
    }



    // actions
})

state, getter, mutation(setter), actions

4. getter 사용하기

실시간으로 감지하는 logged 만들기
리턴을 생략하면 {}을 생략해야 하는 거 잊지 않기!

const logged = computed(()=>{
            return store.getters.getLogged
        })

5. mutation 사용하기

store.commit('setLogged', true);

store.commit('사용하고자하는 메소드 명', 변경하는 값)