import axios from 'axios'

export const state = () => ({
  profile: null
})

export const getters = {
  isLogin(state) {
    return !!state.profile
  }
}

export const mutations = {
  setProfile(state, profile) {
    state.profile = profile
  }
}

export const actions = {
  async load({ commit }, id) {
    const res = await axios.get(API_URL, { params: { id } })
    const profile = res.data
    commit('setProfile', profile)
  }
}

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState('user', {
      profile: state => state.profile
    }),
    ...mapGetters({
      isLogin: 'user/isLogin'
    })
  },
  async asyncData({ store, params }) {
    const { id } = params
    await store.dispatch('user/load', id)
    return { id }
  },
  async mounted() {
    // await this.$store.dispatch('user/load', this.id)
  }
}

export const getters = {
  // メソッドスタイルアクセス
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  },
  // ゲッターは第2引数として他のゲッターを受け取ります:
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  },
  // ローカル、グローバル利用
  getSomething(state, getters, rootState, rootGetters) {
    return rootGetters['user/statistics'](state)
  }
}

{
  state,      // `store.state` と同じか、モジュール内にあればローカルステート
  rootState,  // `store.state` と同じ。ただしモジュール内に限る
  commit,     // `store.commit` と同じ
  dispatch,   // `store.dispatch` と同じ
  getters,    // `store.getters` と同じか、モジュール内にあればローカルゲッター
  rootGetters // `store.getters` と同じ。ただしモジュール内に限る
}