Vue - axios모듈 사용

저번 글에서 axios를 활용하기 위해 작성한 모듈을 사용해 보겠습니다.

1. Vuex action에서 axios를 호출하여 state에 데이터 저장

- vue 파일에서 Vuex action을 호출한다.

- create시에 Vuex action을 호출한다.

// test sorce
  // 비동기처리 -> DB작업을 할 때 created()사용한다. 페이지에 처음들어와 데이터를 로드할 때 사용하면 될듯
  created() {
    // console.log(this.users),
    // getUsers methods 호출
    this.getUsers();
  },
  
  methods: {
    // test sorce
    // vuex SampleUsers파일에 setUsers action을 호출한다.
    getUsers() {
      this.$store.dispatch('SampleUsers/setUsers')
    },
  }

 

2. Vuex action에서 axios를 호출하여 state에 데이터 저장

- http://jsonplaceholder.typicode.com/users 에 있는 데이터를 가져온다.

- axiosCommon함수를 활용해서 axios를 호출 axiosCommon함수에 대한 설명은 아래 링크 3번 항목

https://sikk.tistory.com/56

- action에서 response 데이터를 mutations를 거쳐 state에 저장한다.

import { axiosCommon } from '@/api/Index.js'

export default {
    namespaced: true,
    state: {
      users: [],
    },

    mutations: {
      // User 관련
      setUser(state, users) {
        state.users = users;
      }
    },

    actions: {
      // user 관련
      async setUsers({ commit }) {
        try {
          const url = 'users';
          const method = 'get';
          // axios를 호출하는 함수를 변수에 담음
          const response = await axiosCommon(url, method);

          if(response.status === 200) {
            commit('setUser', response.data);
          }
        }
        catch (e) {
          console.log(e)
        }
      },
    }
}

 

3. Vuex state에 값이 잘 전달 되었느지 확인

- 값이 잘 전달된 것을 확인할 수 있다.