Vue.js の Vuex の store.js の記述が多くなって見づらくなってきたので、ファイルを分割する方法について調べてみました。

環境

Vue 2.*

store ディレクトリを作成し、処理を記載する js ファイルの作成

いいね!の表示を作るために like.js ファイルを作成しました。

like.js に処理を記載

like.js

import { store } from "../store";

export default {
  namespaced: true,

  state: {
    data: {
      message: "likeもじゅーーーーーーーーール！！",
    },
  },
  mutations: {},
  actions: {},
  getters: {},
};

store.js に import する

store.js

import like from '@/store/like'

export default new Vuex.Store({

〜〜〜中略〜〜〜

getters: {

},
modules: {
	like: like
	}
})

表示してみて確認

hyouji.vue

〜〜前略

{{ $store.state.like.data.message }}

これで、

表示できましたので、反映されました。

まとめ

store.js からデータを取り出す時と違って、state の後ろに、.like（モジュール名）が入りますので、注意してください。

これで、どのコンポーネントからでも store から firebase のデータを扱うことができそうです。

何か記事で変なところありましたら TwitterDM などでご連絡ください！それでは！