0đź‘Ť
you’ve made some good progress. Next steps are to follow the proper flow in Vuex for “updating” your store. In your App.vue you have your getData() method that ultimately does a fetch() and you attempt to set your store data using this.$store.state.senator = this.senatorA. This is not correct. You should follow Vuex’s one way data flow structure.
You are attempting to directly change the state without first committing your changes to a mutation, which then directly affects the state. I know this may seem like much, even Evan You (creator of Vue) has said he would like to simplify.
Instead of doing this.$store.state.senator = this.senatorA, first you should perform a Vuex dispatch like so, this.$store.dispatch('storeActionFunction', this.senatorA).
Inside of your Vuex Store files, you should have an “Action” (function) that would then call a commit. Your commit may look something like commit('SET_SENATAOR_SOMETHING', data). data would represent your this.senatorA that was passed along via the dispatch.
The commit() has 2 params… the Mutation name you are targeting and the data you want to pass along. Then you would have a section in your Vuex store where you specify your Mutations. A mutation titled 'SET_SENATAOR_SOMETHING' would then take the data passed into it and do something like… state.senator = data.
Boom. Done. Seems like a lot, it is, but that’s how it works. If you want to see some example files I have a project linked below, but my project is abstracted out to a larger degree than what you’re looking to do.
State: https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/store/modules/people/state.js
Access Data w/ { mapGetters } (not required): https://github.com/rebz/vue-meetup-interfaces/blob/master/resources/js/views/people/index.vue
Hope this helps!