vue 중앙 집중식 저장소(공통상수) VUEX 사용

VUEX 설치

npm install vuex --save

 store.js  파일 생성

import Vue from "vue" 
import Vuex from "vuex" 

Vue.use(Vuex) 

export default new Vuex.Store({ 

  state: { 
    testInfo: { id: 1, name: "공통사용", email: "test@test.com" }, 
  }, 

  //state 값을 변화 
  mutations: { 
  }, 
    //비지니스 로직 
  actions: { 
  } 

}) 

main.js  에서 전역 사용 설정

import store from './store' 

new Vue({ 
  el: '#app', 
  render: h => h(App), 
  router, 
  store 
}) 

사용할 VUE 생성

Test.vue

<template>
  <div>
    <h1> 전역변수 ---> {{ testInfo.name }}</h1>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["userInfo", "testInfo"])
  }
}
</script>