So basically, i have declared 2 different routes and set them to use the same component.
How do i go about updating the data (different API requests based on route) in this component.
I managed to make it work by calling a method this.updateData per say and calling this method on created lifecycle hook and also calling it on watching the $route.path property, and it works but it seems a dirty way to make it work to me, and i might be missing something.
Edit: Im using just Vue js for Simple Page Application, no other frameworks nothing fancy.
For anyone running to the same problem, vue.js tries to reuse components instances as much as it can so basically unless you have a key unique attribute on the component it will point to the same component instance.
So to have a different instance for everytime you use that component add a key attribute which has to be unique. e.g.
<router-view v-bind:key="$router.path" />
In this case it will use the path as a key so that for each route you use a shared component it will create a new instance and you can access the created() lifecycle hook on each one.
Related
I know there are tons of solutions for this using Redux and other state management packages, but for the purpose of my project, I'm not really relying on a lot of state change
Now my issue lies in the following; I'm logging the user in using several APIs, one of which is a chat API. The helper logs the user in and then sets its own state with two objects returned.
On the Chat page, in the render() function I have conditionals for certain elements to be rendered based on the presence of the two states returned from the helper library, if they exist pass them as props to child components.
I understand I can use globals to set a global.chatReady from the Helper and just use that, but since the login takes some time, if the page is loaded before the global.chatReady is set I would need to navigate away to update the UI.
There is no link between the Helper and Chat and I'm not sharing any states using react-navigation.
Any ideas? o.O
Create a state in app component , something isChatHelperReady, pass it down the Chat component, also pass down an update isChatHelperReady method to login component from app component. In login component after import helper library, update the isChatHelperReady state in app component using the method
Is it possible to send data defined in a component in the data() method to the main.js file (or where the Vue instance is defined)? I thought I could use vueX to do the following but have no idea as how to approach it even after understanding computed props, getters and mutations:
Data in Component -> Store -> Main.js
EDIT: HOW DO I SET DATA IN THE VUEX STORE FROM THE COMP?
Imagine the store has a property called currentList, whose values need to be fed in from a list in Component1.vue. How would I send that list to the VueX Store?
If you want to pass data from your component to the Vuex $store, you should use Mutations (or actions, if the data comes into your component asynchronously).
Assuming your mutation has already been defined in the store (and the store has been set up correctly), you can call it from your component as follows:
this.$store.commit("YOUR_MUTATION", "data")
I do recommend the vue-tools in your browser to keep track of what's in your store.
I know no Vue, but I believe I understood what you're looking for.
What you're trying to achieve here, in every other front-end framework, can be called like: "component to parent communication".
You can have a 4th level nested component and you want to pass some data to the Main.js (that I suppose, in Vue, it's still a component, precisely the root one)
As I see, you can use $emit: https://forum.vuejs.org/t/passing-data-back-to-parent/1201
In React (and you can do this in Vue too, but you should choose the vue style solution) you would use a callback function: the parent pass to the child a function that the child can call to set a certain property inside the parent comp.
Another common option nowadays, that avoids completely this kind of communication, is the use of a state management lib like Redux. In that every component can access a global store (that is like a global variable) and after the 4th level component set a property in this global store, the main.js can read it.
I have problem with sharing objects that were created within some component. I am curious how can i access those objects in another component. Can i create a global variable that is accessible within all classes? Unfortunately, i cannot find any relative answers or project in the web.
Create a closure within the component that will hold all the data you want to make available to other components, then export it alongside your component.
whenever you want to use that shared data, require the closure the same way you require a component.
ps: probably it's better to use any variant of Flux, I recommend Redux
Well if you wanna give a children some of the parent object you can do
in the parent:
<Children anything={yourObject} />
and access to yourObject in the children using:
const childrenObject = this.props.anything
But this will work in a simple react app, If you are planning to do something more complicated then you should try to learn redux, it will give your app a global state called Store where you will put whatever you want and access anywhere in your app
https://www.codementor.io/mz026/getting-started-with-react-redux-an-intro-8r6kurcxf
Im using Vue and Vuex in my application and I have some components. By the time passing I know I will probably have a few more which is gonna be a lot. So I have a problem with sharing the app state within all the components. So I'd like to know which way should I follow? Either passing the state to all the components no matter child or parent, or passing the state to a parent one that will be used in some of its child components and then passing the state to them as a property (however, I do need to import the mutations methods because props are not reactive)?
UPDATE:
Keep in mind though that if a component is going to be displayed or hidden and the conditional statement v-if is attached to the component custom tag, each time the entire component is going to be rendered again! But not if statement was only on some child tags in the component.
Thanks in advance.
What you are asking is a false dilemma. From the official documentation:
By providing the store option to the root instance, the store will be injected into all child components of the root and will be available on them as this.$store.
(emphasis mine)
Which means that sharing the store between components no matter how deep in the component tree is handled for you automatically by vue and vuex.
It's quite opinion based question, but I would say it is much better way to use Vuex since the beginning if you know that your app can be developed into large scale.
Passing states from parent to child all the way etc is not good way, so it is better to use Vuex now and you will save a lot of time changing your app in the future when you would have no other way than vuex.
I am just getting started with Flight.js and realized that component instances share local variables, but didn't find anything about it in the documentation.
This is what i mean:
flight.component(function () {
var sharedBetweenAllInstances = true;
this.notShared = true;
}).attachTo('.multiple-elements');
As example, if a component should count clicks on it, it could increment this.clicksCount for the number of clicks on each single instance, and increment var totalClicks for the total number of clicks on any instance of the component.
I didn't find anything about this in the documentation, so I wonder if flight components should be used this way?
Thank you!
I don't think that's a good idea (probably why they don't mention it in the docs). The function you setup as your "component" is actually applied as a functional mixin, along with any other mixins your component uses. So, while you might be able to access that variable when doing an .attachTo('.multip-selector') where you're setting up an instance on each of many components, you could still run into problem if attaching individually, or if the shared variable controls resources in which a race condition to access that shared resource becomes problematic.
From a "component" standpoint, you're better off pulling out any shared state into a separate data component or controller type component that can receive updates form the individual components and broadcast the shared state when it's updated.
Here's an example I put together using that scenario via jsbin: http://jsbin.com/qecupi/edit?js