오늘도 난, 하하하

Vuex

• 모든 컴포넌트에서 접근 가능한 js파일 내에 데이터를 몰아 넣음
• 코드가 복잡해 질 수 있어서 사용하는 컴포넌트와 데이터가 많을 때 사용
• 주의: 컴포넌트 안에서 직접 수정 금지!!
• 설치(vuex v4.x기준)

• npm install vuex@next --save

• js파일 만들기(보통 store.js로 만드는것이 관행)

• import { createStore } from 'vuex'
  
  // Create a new store instance.
  const store = createStore({
    state () {
      return {
        // data
        name : 'Kim'
      }
    },
  })
  
  export default store;

• main.js 수정

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

vuex state

• data 사용, data대신 state라고 부름
• 예시

• <h4>Hello {{$store.state.name}}</h4>

vuex mutations

• 데이터변경 시 사용하는 함수 정의, 데이터는 직접변경은 하지 말것, 나중에 버그 찾기 어려움
• store.js에 state 수정 방법 정의

• ..
  const store = createStore({
    state () {
      return {
        name : 'Kim',
        age : 20,
      }
    },
    mutations : {
        changeName(state) {
            state.name = 'zero'
        },
        addAge(state, payload) {
            state.age += payload
        }
    }
  })
  ..

• 데이터 변경 수정 시 store.js에 요청

• <button @click="$store.commit('changeName'); $store.commit('addAge', 10)">click</button>

vuex actions

• ajax 함수 호출: mutations 함수 호출 $store.commit 대신 $store.dispatch 사용

•   <button @click="$store.dispatch('getData')">more</button>

• ajax 함수 정의, 데이터 변경 함수 정의

•   ...
    mutations: {
      setMore(state, data) {
          state.more = data
      }
    },
    //   ajax 기능 구현
    actions: {
      getData(context) {
        axios
          .get("https://codingapple1.github.io/vue/more0.json")
          .then((result) => {
              console.log(result.data);
              context.commit('setMore', result.data)
          });
      },
    },

vuex ...mapState, ...mapMutations, ...mapActions

• import

• import { mapActions, mapMutations, mapState } from 'vuex';

• ...mapState: $store.state.데이터명 축약
  • $store.state.데이터 축약을 위해서 compute 사용도 가능

•  <p>{{myname}} {{age}}</p>
   ...
   computed : {
      // 값을 간직하고 있음, 컴퓨팅 파워 절약, 재렌더링 안함
      name() {
        return this.$store.state.name
      },
  
      // spread operator
      ...mapState(['name', 'age', 'likes']),
      ...mapState({'myname' : 'name'})
    },

• ...mapMutations: $store.commit('함수명')축약

• <button @click="changeName(); addAge(10)">click</button>
   methods: {
      ...mapMutations(['changeName', 'addAge', 'setMore']),
   }

• ...mapActions: $store.dispatch('함수명')축약