store 사용법 VUEX

$ $ yarn add vuex@next –s a ve

1.src/store/inxex.js(store설정)import<createStore}from”vuex”;

const store = createStore ({state: {sessionEmail : ‘[email protected]’,sessionName : ‘korea’},getters: {sessionEmail(state) {return state.sessionEmail},sessionName(state) {return state.sessionName}},mutations: {setSessionEmail: function (state, email) {alert(’email:’+email);state.sessionEmail=emailreturn state.sessionEmail}}})

export default store

2.main.js(store등록)import<createApp}from”vue”;importAppfrom”./App.vue”;importrouter”;importvuetifyfrom”./plugins/vuetify”;import{loadFonts}from”./plugins/webfontloader”;importSuiVuefrom’semantic-emantic-export/store;store;store;

loadFonts();

createApp(App).use(router).use(vuetify).use(SuiVue).use(store).mount(“#app”);

3.component에서 본다

<div class=”field center aligned”><h3><i class=”unlock alternate icon”></i> Login</h3>{{this.$store.getters.sessionEmail}} {{this.$store.getters.sessionName}}</div>

4.component에 store값 변경(예 Login.vue)axios.post(“http://127.0.0.1:5000/login”, jsonData,{headers:{“Content-Type”:”Application/json”}).then(response)=>{if(response.data[0]===’n’)this.$ruter.push(‘/loginfail’)else{this.$store.commit(‘setSessionEmail’, this.email)//commit에 store값 변경 한다.alert(this.$store.getters.sessionEmail);this.$router.push(‘/’)}// this.$session.set(‘sessionemail’, response.data[0]);console.log(response);}).catch((error) => {console.log(error);});