This is kinda a vague question
I have a React Native component that is going to be used in a ListView, each one is going to be slightly different in the sense that each component is populated different information in its props, each component also needs a mobx store to help pass information. Is there a way to dynamically create Mobx stores so each component has a Mobx store?
I was almost thinking like have a base mobx store class that each component uses, but not sure if this is the correct approach
When I understand your question right, you have the same data, but every list shows this data in a different way?
For that case you would create a computed prop for every list.
Fetch the data once, store it in a observable prop but let your lists use the computed props. In the computed props transform or do whatever you want with the fetched data.
https://mobx.js.org/refguide/computed-decorator.html#-computed
Related
I'm new to vue, and what i would really want to do is to have the possibility to insert a component into another component, without knowing the name of the component.
What i can do, at the moment, is to create a component "componentA" in which i make use of another component "componentB".
However, my goal would be to have componentA declare that it wants to use some component, when it doesn't yet know the component's name. Then, obtain the component's reference through props (or wherever) and use it.
In the same way that, through props, a component can obtain information without knowing what it's gonna be, i would like to know if the component can receive another component and make use of it, without knowing what the component is gonna be.
Is there a way to achieve this in vue.js?
Edit: It can be done by using Dynamic Components. Thank for providing the answer in the comments.
I have a VueX state that contains a list of items. E.g.:
{
operations: Operation[]
}
We need to display each Operation as an item in a list. So we have an OperationList component and an OperationItem component.
When it comes to rendering the list (v-for), would it be recommended to pass the entire item as a prop or just the id and have the OperationItem read the data from VueX?
Basically:
<operation-item v-for="operationId in operationIds" :id="operationId" :key="operationId"/>
vs
<operation-item v-for="operation in operations" :operation="operation" :key="operation.id"/>
I think it might be a preference choice but in my projects I usually pass all the prop of the components that way :
<operation-item
v-for="operation in operations"
:key="operation.id"
:prop1="operation.prop1"
:prop2="operation.prop2"
:prop3="operation.prop3"
/>
I'm not sure if that's a good practice or not but in this case, it's more flexible, you don't need to give a structured object for it to render, you just have to give it all it's properties.
A bit like for a class constructor, I would pass all the necessary parameters separately instead of passing them in an $option array or Settings class.
For some components, it also doesn't make sense for them to be aware of the store, they should juste be "stupid" rendered components.
I hope it's clear enough that you get my point !
I'd say pass the entire item. That way your component doesn't need to know where the data came from and you would be able to reuse the component in situations where the data didn't come from Vuex.
I have component nabber/header that has a props, and I want to put the props in that component and then want to use that props on another props, how to put that props to get that data and transfer it to another component ? because I want to use that props to CRUD in database ? is that possible that we use $root to get that props which we put on App.vue ??
my components
header = [ props : 'list' ]
shop = add to cart, ( this which I want to transfer it to props list ) and go CRUD , is that possible ??
I suggest learning a bit more about Vuex to solve this problem.
This will give you a logical place to define database related actions that can also provide reactive data to components that will display it. Even if you're relatively new to Vue, learning Vuex sooner rather than later will payoff.
It may also be possible for you to use v-model to extricate some data from one component... but what you've described seems a bit different. It might be worth looking at how to implement v-model on your own components as you become more familiar with Vue!
I have an application that has hundreds of screens. I usually pass the variables from parent to child between the components with props. I find it very uncomfortable to pass the array with the user information hundreds of times.
I am testing the global variables of react native. Does it have any danger to use a global variable to save user information and modify it within the components?
I have searched for documentation and nothing is said. I know it's not correct in react, but it works wonders for me.
Any recommendation?
If that global variable is a constant or it's value doesn't effect rendering of components then you are good to use it as global variable or async storage.
But if it's value is changing and affecting the rendering of component then I highly recommend you to store that value as state and to make it global you can either use
1) Context api (https://reactjs.org/docs/context.html)
2) Or Redux
I have a layout file in which I have some data. Besides that I have three components:
tags
students
actions
I want to declare the data in the layout file, but access it through the three child-components.
How is this done in Vue.js?
Thank you for your help.
One option can be to pass the props to all the child components which is the norm in vue when it comes to passing data to child component, as also explained here.
Given that you want to pass same data to all these components and there can be cases going forward when you want to change this data and get it reflected in parent as well, you can go for a centralised state management, which is explained here in more detail.