Vuex の store をファイル分割したあとのデータの受け渡し方法についてまとめました

⇨ 前回の記事がこちら

前回は、store の処理をファイルで分ける方法について記載しています。

が、問題が発生しました。

データの受け渡し方法が分からない。

結論

rootState を使えば良いということが分かりました。

getters: {
  test1: (state, getters, rootState, rootGetters) = rootState.test1;
}

以下は解説です。

store ファイル間で、state や getters のデータを送りたくなった

前回と変わらず、このようなディレクトリ状況。

まずは、一つのファイル内で、state の値を使いたい時の方法について書きます。

like.js

state: {
  message: 'テストーーーーーーー！！',
},
getters: {
  test2: state => state.message
}

.vue ファイル側

<template>
  <div>{{ $store.getters['like/test2'] }}</div>
</template>

<script>
  import { mapGetters } from "vuex"

  export default {
    methods: {
      ...mapGetters(["like/test2"]),
    },
  }
</script>

これが、一つのファイルのときの書き方です。

今回やることとしては、

like.js 　 ⇦⇨ 　 store.js

で相互に state や getters のデータを送る方法についてです。

rootState を使えばファイル間でもデータを共有できる

これ、本当に検索が大変でした。

だから記事を書いているわけですが。

逆に常識すぎるのかな・・・。

store.js

state: {
  test1: 'test1',
}

like.js

getters: {
  test1: (state, getters, rootState, rootGetters) = rootState.test1;
}

.vue ファイル側

{
  {
    $store.getters["like/test1"]
  }
}

このように、第三第四引数に、rootState、rootGetters を渡すことにより、グローバルな state を使うことができました。

ちなみに、これを調べるのにかかった時間は３時間です。（とほほ・・・）

まとめ

以上です。

感想、間違っているところとかご指摘あれば TwitterDM ウェルカムなのでお待ちしております！