概要

NuxtJSのプラグインの中にvuexを使う場合のお話です。

例えば、ローディング中みたいなステータスを更新したい処理（アプリケーション全体でよく使うstateを更新する処理）があるとして
それを呼び出すのに、

• vuexのmutationをimportしてきて…
• methodで定義して
• mutationを呼び出す

みたいな箇所が冗長だったので、スッキリさせたいなとおもい実装しました。以下のようになります。

実装

store/app.js

export const state = () => ({
  loading: false,
})

export const mutations = {
  turnLoadingOn(state) {
    state.loading = true
  },
  turnLoadingOff(state) {
    state.loading = false
  },
}

plugins/app.js

export default ({ store }, inject) => {
  const app = {
    turnLoadingOn: () => {
      store.commit('app/turnLoadingOn')
    },
    turnLoadingOff: () => {
      store.commit('app/turnLoadingOff')
    },
  }
  inject('app', app)
}

pages/**/*.vue(任意のページでの使い方）

<script>
export default {
  methods: {
    async submit() {
      this.$app.turnLoadingOn()
      try {
        // do something
      } finally {
        this.$app.turnLoadingOff()
      }
  },
}

以上になります。