🗒️

【Nuxt.js】storeの基本的な書き方

1 min read

store/〇〇.js

export default {
  state: () => ({
    isLogin: false,
    userId: '',
    userName: ''
  }),

  mutations: {
    // mutations/actionsの関数は、
    // 引数を3つ以上受け取れないため第2引数をオブジェクト型にする。
    setLogin (state, { userId, userName }) {
      state.isLogin = true
      state.userId = userId
      state.userName = userName
    },
    setNotLogin (state) {
      state.isLogin = false
      state.userId = ''
      state.userName = ''
    }
  },

  actions: {
    login ({ commit }, { id, password }) {
      // ログイン処理・・・
      // mutationsの処理を呼び出すときはcommit
      commit('setLogin', { userId: '<ユーザーID>', userName: '<ユーザー名>' })
    },
    logout ({ commit }) {
      // ログアウト処理・・・
      commit('setNotLogin')
    },
    sampleMethod ({ dispatch }) {
      // actionsの処理を呼び出すときはdispatch
      dipatch('logout')
    }
  }
}

Discussion

ログインするとコメントできます