Vuex 검색바 구현 - Tirrilee/TechTalk GitHub Wiki

<template>
  <div id="search-bar" class="search-bar form-inline my-2 my-lg-0">
    <input class="form-control" type="text" v-model="region" placeholder="지역을 검색하세요">
    <button class="btn btn-secondary my-2 my-sm-0" type="submit">검색</button>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  computed: {
    region: {
      get(){
        return this.$store.state.region;
      },
      set(payload){
        this.$store.commit('getRegion', payload);
      }
    },
  }
}
</script>

<template>
  <div class="container">
    <app-search></app-search>
    <p>검색어 : {{ region }}</p>
  </div>
</template>

<script>
import SearchBar from '../components/shelter/SearchBar'
import { mapState } from 'vuex'

export default {
  computed:{
    ...mapState([
      'region'
    ])
  },
  components: {
    'app-search': SearchBar,
  }
}
</script>

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  	state: {
	    region:'',
  	},
  	mutations:{
	    getRegion:(state, payload) => {
	    	state.region = payload;
	    }
  	},
})