I have a SPA built in Vue.js that lets the user input several values to create something like a recipe. All these values are stored in Vuex state. I would like to be able to create a URL using the state values that the user entered so that another user can load the app with those values already entered. Essentially I want to allow users to share the recipes they created in my app by sharing a URL.
I'm imagining a "share" button which will copy the created URL to the user's clipboard which they can then post on social media or whatever. Then when someone visits the link, they will go to my app and the vuex state values will automatically be updated to the parameter values found in the URL.
What is the best way to achieve this functionality? Is this something that is possible with vue-router?
Use the $route.query property provided by vue-router.
Pass in a parameters through your URL like http://example.com/#/?amount=10 and access them with this.$route.query.amount.
Update your vuex store in the main component's mounted() method.
Official Documentation for the Route object
If I understand you correctly the vue-router should do exactly that.
have a look at the documentation where they send the user id. You can pass as many parameters as you like.
https://router.vuejs.org/en/essentials/dynamic-matching.html
note: you may consider rebuilding application paths using the router.
Related
I have below two vuejs page. I created filters in my list page like search by user name and email. The filter is working fine, but the issue is when I type something in my search box and search it's working but after that when clicking on the edit user link and after that comes back to the list page the filter is removed and it shows me all data. My question is how can I remember the search I just need suggestions on how can I achieve that.
localstorage or vuex possible solution for that?
1. List of users
2. Edit User
The solution is to save the filter in a vuex state that way it doesnt change when u go back as long as you're still in the same tab and didnt close it.
If you don't refresh the page and navigate between the route's components, it's best to use Vuex, and on the other hand, if you want the same search results to be stored and retrieved even after refreshing the page, use the localStorage.
Furthermore, Vuex would be good to store large lists of data instead of localStorage.
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
I’d like to integrate vue into a existing webproject. In detail I want to use vue to integrate data from www.autoscout24.de into a website which basically uses Modx-cms, which means that the routing generally takes place inside Modx. With vue I want to realize a search form which I can integrate anywhere inside the existing website. The results should display under something like domain.tld/cars and a single car should be displayed at something like domain.tld/cars/cardetails#8574746
So regarding the routing I guess /cars and /cars/cardetails will be regular sites of the cms (vue only shows the data) but the Hashtag-routing for cardetails will be handled by vue, right?
As the App (should I call it three different apps?) will not be a SAP how can I pass data between the search form, /cars and /cars/cardetails#xyz? Is local storage the way to go?
Is that the right approach. Maybe my approach is even completely wrong, as I am new to vue?
Some further details regarding the app:
The searchform will react to every user input with a request to the Graph QL-Api in order to show the user live how many results he will get. Above the form there will be a teaser with around 10 random cars. After submitting the form the user is directed to /cars where he receives his resultslist (photos of the cars + some quick information). Above the list I want to show the filters so the user can adjust the resultslist. When the user clicks on the car he will get directed to /cars/cardetails#xyz where xyz is the id of the car in order to fetch the cardetails from the api via js/graphql.
Kind regards
Here are some screens to illustrate it. The parts which should be realized with vue are marked red.
I want to make a todo list in vue.js with calendar.
So, generally, I need a calendar and depending on the chosen date, the todolist is showing. This app must have a basic CRUD functionality, so, basically, it's a todo app with the calendar and local storage.
Can anyone drop me some link of the similar apps? They don't have to be the same, but I have a problem with calendar's connection to the todo list.
Have a look at Vuetify.js. It provides a number of components that works with vue.js out of the box. You can find the calendar components here.
I suggest you create a vue landing page that contains your calendar. Then mock out your store in the component data to provide dummy data to your calendar. Then hook up your data to a vue (vuex) store. See Vuex.
You can read from your store or you can take it a step further and hook up your store to a database or local storage.
I have a use case where I redirect the user to the same page but with a different route (/prices/usd, prices/yen, prices/eur etc...). I am using firestore and I am able to get data from firestore when the route is first visited but then onwards it doesn't fetch the fresh data even though route change if the page is same.
Use beforeRouteUpdate to bind to a different ref/document/collection