Vuex Axios 사용 예제

api.js

import axios from 'axios'

export default() => {
    return axios.create({
        baseURL: `http://localhost:8000/api/`,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': `Token ${localStorage.getItem('token')}`
        }
    })
}

Login.vue

<template>
  <div id="signin">
    <div class="signin-form">
      <form @submit.prevent="signIn">
        <div class="input">
          <label for="username">사용자 ID</label>
          <input
                  type="username"
                  id="username"
                  v-model="username">
        </div>
        <div class="input">
          <label for="password">비밀번호</label>
          <input
                  type="password"
                  id="password"
                  v-model="password">
        </div>
        <div class="submit">
          <button type="submit">전 송</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>

  import { mapActions } from 'vuex';

  export default {
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      ...mapActions(['setIsAuth']),
      signIn () {
        const formData = {
          username: this.username,
          password: this.password,
        }
        
        const baseUrl = 'http://localhost:8000/api/authenticate/'

        this.$axios.post(baseUrl, formData)
            .then(res => {
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('name', res.data.name)
                localStorage.setItem('username', res.data.username)
                localStorage.setItem('team', res.data.team)
                localStorage.setItem('picture', res.data.picture)

                // Call Actions
                console.log("jump about")
                
                this.$router.push({
                  name: 'about'
                })

            }, error => console.log(error))
      }
    }
  };
</script>

<style scoped>
  .signin-form {
    width: 400px;
    margin: 30px auto;
    border: 1px solid #eee;
    padding: 20px;
    box-shadow: 0 2px 3px #ccc;
  }

  .input {
    margin: 10px auto;
  }

  .input label {
    display: block;
    color: #4e4e4e;
    margin-bottom: 6px;
  }

  .input input {
    font: inherit;
    width: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }

  .input input:focus {
    outline: none;
    border: 1px solid #521751;
    background-color: #eee;
  }

  .submit button {
    border: 1px solid #521751;
    color: #521751;
    padding: 10px 20px;
    font: inherit;
    cursor: pointer;
  }

  .submit button:hover,
  .submit button:active {
    background-color: #521751;
    color: white;
  }

  .submit button[disabled],
  .submit button[disabled]:hover,
  .submit button[disabled]:active {
    border: 1px solid #ccc;
    background-color: transparent;
    color: #ccc;
    cursor: not-allowed;
  }
</style>

Profile.vue

<template>
  <div class="about">
    <h1>This is Profile List</h1>
    <ul>
        <li v-for="profile in getProfiles"> {{profile.personname}} </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
    name: 'about',
    computed: {
        ...mapGetters(['getProfiles']),
    },
    methods: {
        ...mapActions(['loadProfiles']),
    },
    mounted(){
        this.loadProfiles()
    }
};
</script>

serviceAPI.js

import Api from './Api'

export default {
    getProfileList(){
        return Api().get('profiles/')
    },
    getProfile(id) {
        return Api().get(`profiles/${id}`)
    }
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'

import serviceApi from '../service/serviceAPI'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    errorState: '',
    isAuth: false,
    profiles: [],
  },

  getters: {
    getErrorState: state => state.errorState,
    getProfiles: state => state.profiles,
    getIsAuth: function(){
      var value = localStorage.getItem('token')
      if( value == "" || value == null || value == undefined || 
        ( value != null && typeof value == "object" && !Object.keys(value).length ) ){
        console.log("Not authencated")
        return false
      } else {
        console.log("authencated")
        return true
      }
    }
  },

  mutations: {
    ERROR_STATE(state, errorState) {
        state.errorState = errorState
    },
    
    SET_PROFILES(state, data) {
        state.profiles = data
    }
  },

  actions: {
    setErrorState({commit}, data) {
      commit('ERROR_STATE', data)
    },
    
    async loadProfiles({commit}) {
      const res = await serviceApi.getProfileList()
      console.log(res.data)
      commit('SET_PROFILES', res.data)
    }
  }
});