I have started to build apps with vuejs recently and have one small issue that I can't get around:
I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?
Thank you.
Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.
1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost
2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment
Related
I'm new to Nuxt and Vue in general, so I'm not sure, what would be the best solution for this use case.
I want to change the text (like "Home", "Settings", "Favourites" etc.) inside my Header.vue (always fixed on top of the page) from another component. like Favourites.vue for example.
Sometimes I want to hide the header completely or hide the title and display buttons instead,
so I need to pass more props than just the title.
I tried using different layouts, but that breaks the animation transitions (I haven't found the solution for this yet), but I think it's still better to have control from the page in what I'm passing into this component.
Should I pass props from Page.vue to parent and read it from there in Header.vue component?
Should I use Vuex to pass this through the store and update it when the route changes? Or is that too complex for this use case?
Maybe there's a simpler solution that I'm not aware of.
Folder structure:
/components
├──Header.vue
└──Nav.vue
/pages
├──Index.vue
├──Profile.vue
├──Settings.vue
└──Favourites.vue
Vuex is the answer here— don’t worry about the 'simple' use case. As soon as you notice you’re creating data that other components may rely on (is the header visible on this page? Is the text different? etc) it’s a good idea to move into Vuex and maintain a single source of truth.
Your app may seem simple to begin with, but it’ll inevitably grow and at that point you’ll appreciate having a single source of truth vs. trying to pass things between components via props.
Nuxt also makes implementing Vuex very straight forward. No doubt you’re capable of pulling up the docs!
I have been developing a Vue project and something caught my attention today. I used checkboxes with some sytling (I use them as toggle switches) throughout the project and thanks to these elements, I show or hide some elements and components. Toggle elements control specific data within each component. When the data istrue, some elements are displayed on the page and when false, they are hidden. What I noticed today is a little interesting. There is probably a simple solution, but although I have been searching the internet for a while, I haven't found a solution yet.
Here is the thing;
Let's say I am at the About page of my project. I used my toggle switches and now some of my elements and some sub components are displaying in the About.vue. Then I go and visit my Services.vue page and showing and hiding some elements and sub components as well. By the way, almost all of these pages have forms and I save these forms to local storage. When I return to My About page from my Services page, I see that the elements I activated have been restored. In other words, each component welcomes me with its default state when it is returned from another component. What I want to see is, If I go and check some checkboxes to show some element, No matter how long I roam between other routes, I want those elements to remain visible or hidden when I come back. For example, a toggle element must be activated to write a username and password on a component. After activating the toggle element, the user types the username and password and clicks the Save button. Then he continues to browse many areas of the project and when he returns, he sees that the toggle element is inactive and the username and password are not entered. I don't want it to be that way. How do I fix this?
you can use vuex for solved this problem.
https://vuex.vuejs.org/
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension (opens new window)to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
I am not pretty sure if in web development this kind of thing is called as a 'bookmark' layout. I'll explain on below screen.
I would like to achieve something like this and missing a knowledge of how to do that. Could someone point me where should I anchore ? I could not find anything in web / probably looking with using bad phrases.
This component would be part of the application, after we push to the router path it's going to display this kind of layout. Basically I could achieve this buy keep pushing a different route for each page, but what if those pages belongs to "one model comoponent" I wouldn't like to reload them all of the time while switching them, just once after we entry to each. It would work like a tab bar in mobile apps (iOS).
In many UI contexts (e.g. browsers, macOS applications, etc.) and in Web Development, what you refer to as "bookmark layout" is simply called tabs (like the iOS tab bar that you also mention).
I wouldn't like to reload them all of the time while switching them
Vue offers you the built-in component <keep-alive> for such use case:
When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them.
See the Vue guide: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
When switching between these components though, you’ll sometimes want to maintain their state or avoid re-rendering for performance reasons. […]
To solve this problem, we can wrap our dynamic component with a <keep-alive> element
Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
It's easy to get a reference to navigator in the renderScene function, so calling navigator.push(newRoute) is simple when responding to an event that happens from within the JSX tree.
In my case, though, I want to call navigator.push(newRoute) from an external event. My app signs the user in with Google and fires an event when the sign-in is complete, and I want to navigate to a new route in that case.
How can I get a reference to the navigator? Is there any way to get it besides as a parameter to renderScene?
You can get the navigator through refs property: https://facebook.github.io/react/docs/more-about-refs.html. It's part of react (not specific to react native). It's not obvious from the react-native docs that there is a number of 'react' features that can be used in react-native, so i'd really advise to take a close look at react in general.
Note however, there is a good reason Facebook does not mention refs explicitly and loudly. Refs is really not a "go-to" way of accessing component. Your case might be of course different, but it's likely that the Google sign-up is not in-fact "external". It might actually be part of one of the components in the hierarchy tree above the navigator (in which case you can pass the state change down the tree).
Quoting from the summary of the "More about refs" document above:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Again - your case might be different and using refs might be perfectly justified, but if you are tempted (for example) to separate out all the Google-related stuff to separate object and if that makes the sign-up "external" - think twice. React really encourages putting all things related to a "component" logic in one place (the component) - even if that includes various technologies and external APIs.