참고 vuex import 스타일 - https://kdydesign.github.io/2019/05/09/vuex-tutorial/ vuex 개념 - https://joshua1988.github.io/web-development/vuejs/vuex-actions-modules/
할일 - 스토어 폴더 파일 구조 변경
팁 1. main.js에 store 등록했는지 확인 2. 여러개 store 사용할때 모두 module화 안하면 namespaced 인식 못함 3. createNamespacedHelpers 사용할거면 모듈에서 namespaced : true 하기
Vuex store 여러개 사용하기
1. store 폴더구조 정하기
2. 각 기능마다 state, mutations, getters, actions 모듈화해서 export 하기
// weatherData.js(날씨 데이터 모듈)
var axios = require('axios')
var cheerio = require('cheerio')
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())
})
},
}
export default {
namespaced:true,
state,
mutations,
actions,
getters,
};
// spanishWord.js(스페인어 데이터 모듈)
//vue의 data와 비슷
const state = {
getWord: 'hellofe3ssss4324sㄴㄴㄴㄴ'
}
// vue의 computed와 비슷
const getters = {
}
// state를 수정할 때 사용
const mutations = {
// [GET_WORD](state, data) {
// state.getWord.push(data)
// }
}
// 비동기를 사용할 때, 또는 여러 mutations를 연달아 송출할 때
const actions = {
}
export default {
namespaced:true,
state,
mutations,
actions,
getters,
};
3. index파일(중앙 저장소)에 모듈화 한 파일들 import하기
// index.js(중앙 저장소)
import Vue from 'vue'
import Vuex from 'vuex'
import wordStore from './wordStore/spanishWord'
import weatherStore from './weatherStore/weatherData'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
spanish: wordStore,
weather: weatherStore,
}
})
팁 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: {
},
})
