I am trying to initialize a Vue Formulate Form with some user data that I get from an API via axios inside a Vuex Store in Nuxt. I am using Vue Mapstate to get the store state inside the computed data. The async data is not resolved initially and it seems that the :values property from Vue Formulate is not reacting after a successful response. Is it possible to create a data property that initializes with the asnyc data that I fetch from the API in my component?
Related
In options api,its obvious where we write code for fetching the data from server in mounted method.
With composition api,i am confused as the setup method is the one that loads first before the onMounted hook.
Check their docs: https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram
If you are doing DOM related actions, you would want to do it in onMounted() hooks, because setup() doesn't have access to DOM yet.
So I would probably do it in onMounted() methods since I would probably store result from API to component data or may update DOM as a side-effect.
Hey there short question I do use a BootstrapVue table and the data it shows is provided by a vuex getter invoked at the mounted hook.
Why is it not possible to use the standard sort option provided by the component (b-table) itself?
If I do the same in a method with a axios.get it works perfectly. I think it has to do with vuex state management but I'm not sure.
Context
i have a User object which is the data model for a vue.js UserComponent. When the component is mounted the user has undefined fields. Then inside the mounted() method the user is fetched from the server and all its fileds are setted.
Problem
So i found that vue-test-utils doesn't redraw component when user's fields changed.
Note
On the other hand the same test works good if i change object prop to scalar.
I tried to reset user prop by wrapper.setProp({user: user}) after its fields was fetchad. Unfortunatelly it is impossible as vue-test-utils preventing to set the same object to prop.
Demo repo (cloned from official vue-test-utils-getting-started)
https://github.com/alexey2baranov/vue-test-utils-getting-started
When your component have async methods, like fetch user fields on mounted, you have two options when testing:
Option 1: Test with an async function and await for the nextTick
Option 2: Use the package flush-promises
Both options are detailed in the vuejs test utils documentation with examples.
Also, you can mock axios response with some data for populate your user fields without a real fetch to your backend.
In my vue cli project I have a route Settings with 3 child components SettingsA, SettingsB and SettingsC. Each child component has ca. 15 input fields, so it would be too many input fields for one single component.
The goal is to get data from a REST backend with an an axios call when the Route Settings is loaded, and populate some of the input fields with the data;
the user can then navigate between the child components and fill/change the input fields, without triggering the axios call which would reload and overwrite the users input field changes.
Since there are 3 child components I use vuex as store. That way the users inputs should not change when he navigates between the child components.
My question is: Where and with what hook should I make the axios call? With beforeMounted on the Settings Component?
Maybe there is also a better, already tried design than mine?
Thanks for your help!
Solution using custom events
You actually not necessarily need vuex. Basic idea is to have parent component Settings, which includes SettingsA, SettingsB and SettingsC, which are displayed conditionally using v-if. The Settings component is holding your state. Changes in the child components form fields trigger events with this.$emit(). The parent component listens to the events and updates its state. The state of the form is passed down via props.
Solution using Vuex actions
If you go the Vuex route, you will trigger actions instead of using this.$emit() and update the global store. You should import the actions using mapActions. In your components you then have access to the global store using this.$store.
I am experimenting with Vue and VueX and while everything is working well, there is one aspect that is troubling with regards to the store mechanism.
I have a component that loads a set of data from a remote service via axios. It works correctly and is called when the component is created.
export default {
created() {
this.$store.dispatch('foo/getBar');
}
...
}
This correctly populates the "bar" variable in the component with the valeus returned from the api call.
When I next view the component in the application, the created function is called again and the api called again, which returns the same data.
What is the best practice way of avoiding subsequent calls until we know that there is different data to be collected? Or more precisely, how do I invalidate data in the store when necessary so that api call is made only when it needs it?
You can put your api call to the parent or root component then place a refresh button to the child component.
Or you can check if variable bar is empty then make the api call.