ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

【rootStateで解決】vuexでstoreをファイルで分割したあとデータの受け渡しで詰まった

前回の記事がこちら

https://poppotennis.com/posts/vuejs_store/

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

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

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

image

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

一つのファイル内であれば、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のデータを送りたくなりました。

というのも、store.jsにグローバルな状態(ログインなど)をアレしておいて(語彙力)、

like.jsでログインしている状態なら〜〜○○する。という処理をしたいなと。

一つのファイルに全部書くのであれば悩むことはないのですが、分割することにオシャレさを感じているので、これでやってみたいと思います。

rootStateとの遭遇

これ、本当に検索大変でした。だから記事を書いているわけですが。逆に常識すぎるのかな。

//store.js

state: {

test1: 'test1',

}

//like.js

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

// .vueファイル側

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

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

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