Summary of how to pass data after splitting Vuex store into files.

⇨ Previous article here

In the previous article, we discussed how to split the store processing into files.

However, a problem arose.

I don't know how to pass the data.

Conclusion

I found that using rootState is the solution.

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

Here is the explanation.

I want to send data between store files, such as state or getters

The directory structure remains the same as before.

First, let's talk about how to access the state value within a single file.

like.js

state: {
  message: 'Test!!!!',
},
getters: {
  test2: state => state.message
}

.vue file

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

<script>
  import { mapGetters } from "vuex"

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

This is the syntax for when you have only one file.

Now, we will discuss how to send data between like.js and store.js.

You can share data between files using rootState

This was really difficult to find.

That's why I'm writing this article.

Maybe it's too obvious...?

store.js

state: {
  test1: 'test1',
}

like.js

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

.vue file

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

By passing rootState and rootGetters as the third and fourth arguments, we were able to use the global state.

By the way, it took me 3 hours to figure this out. (Sigh...)

Conclusion

That's all.

If you have any comments, corrections, or suggestions, feel free to DM me on Twitter!