vue-프로젝트 단어장(16일차)

내일 할일
- 단어장 초기화 하기(jsonWord내용도 바뀜 sort 문제 같음)
- 섞어서 볼때 한국어 스페인어 랜덤
- grid 이용해서 꾸미기

// spanishWord.js

import jsonWord from '../../json/word.json'

//vue의 data와 비슷
const state = {
  getWord: [],
  checked: '',
  showWord: [],
  randomWord: [],
}
// vue의 computed와 비슷
const getters = {

}
// state를 수정할 때 사용
const mutations = {
  SET_WORD(state, data) {
    if(state.getWord.length < Object.keys(jsonWord).length) {
      state.getWord.push(data)
    }
  },
  SELECT_WORD(state, data) {
    state.showWord = data
    console.log(data)
  },
  SET_RANDOMWORD(state, data) {
    state.randomWord.push(data)
  },

  RESET_WORD(state, data) {
    state.showWord = []
    state.getWord = []
  }

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

  getData({state, commit}) {
    if(state.getWord !== []) {
      state.getWord = []
    }
    for(var i=1; i<=Object.keys(jsonWord).length; i++) {
      commit('SET_WORD', jsonWord["day"+i])
    }
  }, // GET_ALLDATA 함수 끝

  showAll({state, commit}, data) {
    console.log(data)
    commit('SELECT_WORD', data)
    state.checked = 1
  },

  showKorean({state, commit}) {
    state.checked = 2
  },

  showSpanish({state, commit}) {
    state.checked = 3
  },

  showRandom({state, commit}, data) {
    if(state.randomWord !== []) {
      state.randomWord = []
    }
    commit('SET_RANDOMWORD', data)
    console.log(state.randomWord)
    console.log(state.showWord)
    console.log(state.getWord)
    state.randomWord[0].sort(function () {return Math.random()-Math.random()})
    state.checked = 4
  },

  resetData({state, commit}, data) {
    commit('RESET_WORD')
    for(var i=1; i<=Object.keys(jsonWord).length; i++) {
      commit('SET_WORD', jsonWord["day"+i])
    }
  }


}

export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters,

};

// spanishWord.vue

<template>
 <div>
   <button v-for="(getWord, index) in getWord" v-on:click="showAll(getWord)">day{{index+1}}</button>
   <button v-on:click="showKorean">한국어만</button>
   <button v-on:click="showSpanish">스페인어만</button>
   <button v-on:click="showRandom(showWord)">랜덤</button>
   <button v-on:click="resetData">초기화</button>

   <div v-for="showWord in showWord">
     <p v-if="checked===1"> {{showWord[0]}} : {{showWord[1]}} </p>
     <p v-else-if="checked===2"> : {{showWord[1]}} </p>
     <p v-else-if="checked===3"> {{showWord[0]}} : </p>
   </div>
   <div v-for="randomWord in randomWord[0]">
     <p v-if="checked===4"> {{randomWord[0]}} : {{randomWord[1]}}</p>
   </div>

 </div>
</template>

1. 날짜별 단어장 보기

2. 한국어 단어만 보기

3. 스페인어 단어만 보기

4. 순서 섞어서 보기