vue 事前に "nuxtClientInit" を実行させる

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
リロードしたりする時に SSRでない場合に初期化の処理が入らないことがあるので、それの対応としてnuxtClientInitを入れた

plugins/nuxt-client-init.js
export default async context => {
  return await context.store.dispatch("nuxtClientInit", context);
};

nuxt.config.js
  plugins: [
    { src: '~/plugins/nuxt-client-init.js', ssr: false },
  ]
※ 年のため、一番上におくこと最初に読み込ませたいから

store/index.js
import axios from 'axios'
export const state = () => ({
})

// client初期化時の動作
export const actions = {
  nuxtServerInit({ commit }, context) {
  },
  async nuxtClientInit({ commit }, context) {
    // 認証
    return await new Promise((resolve, reject) => {
      let stored_key = localStorage.getItem(process.env.LOCAL_STORAGE_KEY)
      if(stored_key == "null") { return resolve() }

      commit('auth/setKey', stored_key)
      axios.get(
        `${process.env.SERVER_URL}/api/v2/facility/account`,
        {
          headers: {
            "Content-type": "application/json",
            "Authorization": `Bearer ${token}`,
          },
          data: {},
        }
      ).then(res => {
        commit('auth/login', { key: stored_key, account: res.data.account } )
        resolve()
      }).catch(error => {
        const {
          status,
          statusText
        } = error.response;
        console.log(`Error! HTTP Status: ${status} ${statusText}`);
        reject()
      });
    })
  }
}


[参考]

関連ページ

Vue datepicker

#vue

v-model

#vue
Back