Vuex(기본예제)

// vuex store구조

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

Vue.use(Vuex);

export default new Vuex.Store({

  //vue의 data와 비슷
  state: {
    ...
  },
  
  // 변경된 데이터 업데이트 vue의 computed와 비슷
  getters: {
	...
  },
  
  // state를 수정할 때 사용(동기적)
  mutations:{
    ...
  },
  
  // methods 역할(비동기적)
  actions: {
	...
  },
  
})

 

예제

1. main.js에 store 등록

// main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'



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

2. store에 웹 페이지에서 공동으로 사용할 데이터 등록

// store.js

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

Vue.use(Vuex);
export default new Vuex.Store({
  const state = {
    nowTemperature: '12', // 현재 온도
    nowWeatherCheck: '흐림', // 맑음, 흐림 체크
    todayMin: '1', // 최저기온
    todayMax: '15', // 최고기온
    todayDust: '2', // 미세먼지
    todayDDust: '2', // 초미세먼지
    // test: 'testsadasdwe',
  }
  // vue의 computed와 비슷
  const getters = {

  }
  // state를 수정할 때 사용
  const mutations = {
    SET_TEMPERATURE(state, data) {
      state.nowTemperature = data
    },
    SET_WEATHERCHECK(state, data) {
      state.nowWeatherCheck = data
    },
    SET_TODAYMIN(state, data) {
      state.todayMin = data
    },
    SET_TODAYMAX(state, data) {
      state.todayMax = data
    },
    SET_TODAYDUST(state, data) {
      state.todayDust = data
    },
    SET_TODAYDDUST(state, data) {
      state.todayDDust = data
    },
  }
  // 비동기를 사용할 때, 또는 여러 mutations를 연달아 송출할 때
  const actions = {
    getData({state, commit}, data) {
      axios.get('https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EB%82%A0%EC%94%A8')
      .then(res => {
        var $ = cheerio.load(res.data)
        commit('SET_TEMPERATURE', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.main_info > div > p > span.todaytemp').text())
        commit('SET_WEATHERCHECK', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.main_info > div > ul > li:nth-child(1) > p').text())
        commit('SET_TODAYMIN', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.main_info > div > ul > li:nth-child(2) > span.merge > span.min').text())
        commit('SET_TODAYMAX', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.main_info > div > ul > li:nth-child(2) > span.merge > span.max').text())
        commit('SET_TODAYDUST', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.sub_info > div > dl > dd:nth-child(2)').text())
        commit('SET_TODAYDDUST', $('#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.sub_info > div > dl > dd:nth-child(4)').text())
      })
    },

  },
})

3. 필요한 컴포넌트에서 store import하고 데이터 받아오기

// main.vue(해당 컴포넌트)

<script>
import mainTitle from './main/mainTitle'
import nowWeather from './weather/nowWeather'

import store from './store'
export default {
  name: 'main',
  store,

  components:{
    'mainTitle': mainTitle,
    'nowWeather': nowWeather,
  },

  computed:{
  	// state
    nowTemperature() {
      return this.$store.state.nowTemperature
    },
    
    // ... 생략
    
    // getters
    test() {
      return this.$store.getters.test
    },
  },
  methods: {
    getData () {
      // actions
      this.$store.dispatch('액션명', payload) // payload 생략 가능
      
      // mutations
      this.$store commit('변이명', payload) // payload 생략 가능
  },
}
</script>