Re-design and refactor store logic & data flow through repo editor
Original discussion here.
Pasted below so you don't have to wait 5 minutes for the original MR to load:
I still don't understand why we are doing this with the store. If we need some values, pass it through props. If we need to update, dispatch an eventHub event to update it like our docs say.
I wonder if really should we be using vuex in this merge request. Seems like it would be a massive help & I think it is the way we are heading with Vue.
We should not do this.
The data function returns the internal state of a component.
The Store has methods that update the general state of the app and the state of the app itself.
These methods can't be part of the component internal state.
This is making the internal state of the component to hold the entire store's state and all the methods.
Vue transforms everything returned in the data function as getters and setters.
I am wondering how can this work, this should be causing state problems. 🤔
I agree that this would be easier with Vuex, since Vuex never exposes the methods into the component's internal state. We would be safer.
This also does not follow our styleguide and Vue recommendations, this is what we need to do instead:
data() {
return {
// the store's state
};
},
@jschatz1 please see documentation on this:
data function : https://vuejs.org/v2/api/#data
State management: https://vuejs.org/v2/guide/state-management.html
Our styleguide: https://docs.gitlab.com/ce/development/fe_guide/style_guide_js.html#vue-js
Our vue docs have an example of an app using the store's state: https://docs.gitlab.com/ce/development/fe_guide/vue.html#end-result
@filipa you don't need to link me to the docs again. 😄
As Vue docs state. The data obj is a proxy.
a Vue instance simply proxies access to it.
I think the main concern should be:
Any piece of data could be changed by any part of our app at any time, without leaving a trace.
So the store pattern works for this. VueX would also work. Store pattern is mentioned in the docs. The main problem is who mutates the data. And having a clear sight of that.
For now this is working. This can be reworked in 10.0.
The reason it went down like this is because I originally had each of these as individual Vue apps then they were turned into components. Without really componentizing them.
So we still have some stuff left over.
Edited by Bryce Johnson