[vuex] vue 데이터 동기화

서론

vue 데이터 동기화 방법 eventBus (vue2), emitter (vue3), vuex 중
vuex를 활용한 데이터 동기화하는 방법입니다.
설치: npm install vuex --save

데이터 저장소

//store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {
    lib: []
  },
  getters: {},
  mutations: {
    updateData(state, payload) {
      state.data = payload
    }
  },
  actions: {},
  modules: {},
});

데이터 저장

<div>
    <button @click="updateData(test)">전달</button>
</div>

.
.
.
import { mapMutations } from 'vuex'

export default {
  data() {
      return {
          test: '테스트',
      }
  },
  methods: {
      ...mapMutations(["updateData"])
  }
}

데이터 호출

<div>
	{{changeData}} //output: 테스트
</div>

.
.
.

data() {
    return {
		"changeData": this.$store.state.data,
	}
}