Vue Vuex

토큰, 세션 등 상태를 관리하는 라이브러리
명령어 : npm install vuex

• store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: null,
    userId: null,
    msg: 'hello',
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_USER_ID: (state, userId) => {
      state.userId = userId;
    }
  },
  getters: {
    token: (state) => state.token || '',
    userId: (state) => state.userId || 'default user',
  },
  actions: {
    async login({ commit ,token }) {
      // 로그인 처리 및 상태 변경
      commit('SET_TOKEN', token);
    },
  },
});

• main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './locales';

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

• Hello.vue

<template>
  <div>
    <p><input type="text" placeholder="이메일을 입력하세요" v-model="idInput"/></p>
    <p><input type="text" placeholder="비밀번호를 입력하세요" v-model="pwInput"/></p>
    <button @click="loginCheck()">로그인</el-button>
  </div>
</template>
<script>
export default {
    data() {
      return {
        idInput:'',
        pwInput:'',
      },
    };

    methods:{
      async loginCheck(){
        this.$store.commit('SET_TOKEN',reslut.data.data.app_token)
      }
    },
  };
</script>