Vuex

지금까지 배운거 다 ~ 부질없게 만들법한 강한녀석등장 

store.js(관습적 이름 상관 x) 파일만들고 거기에다가 데이터 다꽂아두고 거기서만 뺴서쓰는거임

프롭스 mitt 이딴거 다필요없어짐 띠용 근데 간단한거는 프롭스 이런게 좋다고함 왜냐면 기본셋팅이 많이걸림

 

https://next.vuex.vuejs.org/  여기서 설치 명령어 보고 설치

 

or 애초에 프로젝트 만들때 vuex 선택

 

Vuex 셋팅src 안에 아무데나 store.js를 만들고 다음코드 작성

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      
    }
  },
})

export default store

그다음 store.js 를 main.js 에 등록

(main.js에 추가하셈)

import store from './store.js'
app.use(store).mount('#app')

차이점 분석해서 잘 붙여넣기 기존에 소스 잘살려야함

 

이렇게 단계를 거치면 store.js 에 저장한 데이터들을 모든 컴포넌트가 가져다 쓸수 있음

 

출력하려면 vue파일에서 {{ $store.state.데이터명 }} 

 

 

함수나 mounted 이런 곳에서 쓰려면 this.$store.state.어쩌구 

 

 자 근데 여기서 문제가생김 모든 컴포넌트들이 다쓰니깐 만약 컴포넌트에서 store.js 의 값을 바꿔버리면 오류 났을때 추적이 힘들어짐

그래서 store.js 에서만 코드를 수정할 수있게함 이걸 멋진 개발용어로 ='state 관리가 용이하다' 라고하며. 그래서.  VueX를 상태(state)관리 라이브러리 라고도 부름.

 

아 그래서 코드변경 어떻게함

 

store 에서 mutations 라는 항목을 만들어서 거기에 데이터 수정방법을 정의합니다.이후컴포넌트에서 store.js 에게 부탁만 하면됨 정중하게\

 

예시 mutations

const store = createStore({
  state () {           // 데이터 대신 state 라고함
    return {
      name : 'kim',
      age : 20,
    }
  },
  mutations :{
    한살더하기(state){
      state.age++   //위에 있는 state 를 가지고 오니 state.age++
    }
  },
}

 

 

코드블럭

(App.vue)

<button @click="$store.commit('한살더하기')">버튼</button>

 

끝