vue-프로젝트 vuex(14일차)

Vue-프로젝트

vue-프로젝트 vuex(14일차)

꾸준2 2020. 4. 23. 12:06

할일
- vuex이용해서 현재 날씨 main컴포넌트에서 사용하기
- 단어 시험장 만들기

팁
1. Object.keys(words).length - 객체의 키 길이를 구하고 싶을때 사용
2. 변수.push(값) - 변수를 [] 빈배열로 초기화 해야됌 아니면 에러뜸
3. import store from '??' - 선언 store말고 다른 이름쓰면 vuex 사용안됌

1. vuex이용해서 현재 날씨 main컴포넌트에서 사용하기

1. store에서 변수 만들기

2. 하위컴포넌트에서 store 변수에 현재 날씨 데이터 넣기

3. store에서 바뀐 데이터 상위 컴포넌트에 갱신하기

// store.js

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

export const SET_TEMPERATURE = 'SET_TEMPERATURE'
export const SET_WEATHERCHECK = 'SET_WEATHERCHECK'
export const SET_TODAYMIN = 'SET_TODAYMIN'
export const SET_TODAYMAX = 'SET_TODAYMAX'
export const SET_TODAYDUST = 'SET_TODAYDUST'
export const SET_TODAYDDUST = 'SET_TODAYDDUST'

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

  },
  // state를 수정할 때 사용
  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를 연달아 송출할 때
  actions: {

  },
})

// nowWeather.vue(하위 컴포넌트)

<script>
import store, { SET_TEMPERATURE,
               SET_WEATHERCHECK,
               SET_TODAYMIN,
               SET_TODAYMAX,
               SET_TODAYDUST,
               SET_TODAYDDUST } from '../store'

var axios = require('axios')
var cheerio = require('cheerio');

export default {
  store,
  data() {
    return {
      loaded : false
    }
  },

  methods:{
    getData() {
      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)
        this.loaded = true

        this.$store.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())
        this.$store.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())
        this.$store.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())
        this.$store.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())
        this.$store.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())
        this.$store.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())
      })
    }
  },

  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
</style>

// 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:{
    nowTemperature() {
      return this.$store.state.nowTemperature
    },
    nowWeatherCheck() {
      return this.$store.state.nowWeatherCheck
    },
    todayMin() {
      return this.$store.state.todayMin
    },
    todayMax() {
      return this.$store.state.todayMax
    },
    todayDust() {
      return this.$store.state.todayDust
    },
    todayDDust() {
      return this.$store.state.todayDDust
    },
  },

  data() {
    return {

    }
  },
  methods: {

  }, // methods 끝
}
</script>

2. Vuex이용해서 단어 시험장 만들기

파일 구조

상위 컴포넌트 - 하위 컴포넌트에서 변경한 데이터 html, css이용해서 꾸미기

하위 컴포넌트들 - 단어 관련된 데이터 가공(모든 단어, 스페인어 가리기, 한국어 가리기, 무작위 가리기, 등등)

store - 단어 관련된 데이터 저장

// wordStore.js

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

export const GET_WORD = 'GET_WORD'


Vue.use(Vuex);
export default new Vuex.Store({
  //vue의 data와 비슷
  state: {
    getWord: [],

  },
  // vue의 computed와 비슷
  getters: {

  },
  // state를 수정할 때 사용
  mutations:{
    [GET_WORD](state, data) {
      state.getWord.push(data)
    },

  },
  // 비동기를 사용할 때, 또는 여러 mutations를 연달아 송출할 때
  actions: {

  },
})

// spanishWord.vue(최상위 컴포넌트)

<template>
 <div>
   <get-word></get-word>
   <button v-for="(word, index) in word" v-on:click="showAll(word)">day{{index+1}}</button>
   <div v-for="showWord in showWord">
     <p>{{showWord[0]}} : {{showWord[1]}}</p>
   </div>
 </div>
</template>

<script>
import store from './spanishWord/wordStore'
import getWord from './spanishWord/getWord'
export default {
  store,
  components: {
    'getWord': getWord,
  },
  data() {
    return {
      showWord: [],
      loaded: false,
    }
  },
  computed: {
    word() {
      return this.$store.state.getWord
    }
  },
  methods: {
    showAll(word) {
      this.loaded = true
      this.showWord = word
    }

  }, // methods 끝
  mounted() {

  }, //mounted 끝
}
</script>

<style scoped>
</style>

// getWord.vue(하위 컴포넌트)

<script>
import store ,{GET_WORD} from './wordStore'
import words from '../../json/word.json'

export default {
  store,
  methods: {
    getAllData() {
      // console.log(Object.keys(words).length)
      for(var i=1; i<=Object.keys(words).length; i++){
        this.$store.commit(GET_WORD, words["day"+i])
      }
    }, // getAllData 함수 끝
  }, // methods 끝
  mounted() {
    this.getAllData()
  }
}
</script>

<style scoped>
</style>