I am trying to make my first Vue.js CRUD application with Vuex, and I am running into a struggle with how to properly load state.
I have a route that lists all accounts /accounts and I am easily loading accounts state for all accounts in a list form.
My challenge/question, how can I effectively use state to view/update an individual record in another route? (ie. /accounts/1). If the user refreshes the browser on /accounts/1 I have no state. What is the best strategy to manage state for both a collection of things, and an individual record in that collection?
You can have a look on https://github.com/JiriChara/vuex-crud. It creates Restful Vuex modules with all actions: CRETE, READ, UPDATE, DELETE. The source code is pretty straightforward, so you can have a look how state is designed and modified.
If you want to retain state after a hard reload you might want to make sure state is saved in localstorage then make sure you are using getters to load the data appropriately via lifecycle hooks. Try vue-localstorage
Related
As of now, my app contains an array and the user can manipulate the order of items in it by dispatching actions. I'm using redux persist and even if I directly change the array elements by editing the source file, the array does not update unless I clear the app cache.
What are my options to update this kind of persistent data after I publish it to the store without forcing users to clear the cache?
What are you looking for is migrations.
How it works:
Load user's previous state from local storage on app start
Update fields you need
Here is a setup example
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 months ago.
Improve this question
I have a doubt about this topic, i would need to initilize the vuex store at the very beginning.
In details, I would need to retrive some data from Local Storage to the Vuex store because these data will decide which landing page the user will land on.
My questions are:
Where is the best place (best practice) to do this in a vue project?
Is there a vantage doing this (copy data from local storage to vuex store) ? is not the same if i read directly the local storage data without use vuex, with localStorage.getItem('key')?
Thank you
1- Where is the best place (best practice) to do this in a vue project?
If you want to set the data of the local storage to your vuex store by generate ( whatever the page you are in ), it would be better to create a plugin to do that.
If storage will depend on the page or component you are in, you can use beforeCreated lifecycle.
2- Is there a vantage doing this (copy data from local storage to vuex store) ? is not the same if i read directly the local storage data without use vuex, with localStorage.getItem('key')?
As #RobinRider mentioned on Quora
Well, Vuex and LocalStorage do different things and are not mutually exclusive. Vuex is typically used to maintain the state while the application is in use. LocalStorage is often used for persisting state between application runs. Example: refreshing the browser window will wipe the Vuex state, but everything in LocalStorage remains unchanged. Having said that, Vuex is much more advanced when it comes to handling state data. LocalStorage is essentially just a list of JSON-encoded data. You can retrieve that data, and set it. Nothing more. Below are a couple benefits of using Vuex.
Code Duplication
By using a state management library, such as Vuex, you can avoid duplicating code if you need to access state data in multiple parts of your application. You only need to create methods for reading and parsing state data once in a Vuex store. Every time you want to load something from LocalStorage, you will need to also make sure to decode the result per your needs. Depending on your application, that may or may not be simple.
Getters You are able to provide custom functions used to provide derived versions of the application state. The results of these functions are cached, only being updated when the data they depend on is updated. This provides uniform results across your application. Getters | Vuex
Actions
You can provide functions to perform certain tasks, and then update the state after these tasks are completed. One of the biggest benefits of actions is that they are asyncronous, making it easy to use AJAX to query a server, and then commit that data to the application state.
I think the simplest approach is to do it right when creating Vuex
export default new Vuex.Store({
state: {
foo: localStorage.getItem('foo')
}
})
You also may like this plugin which saves your Vuex state between sessions in localStorage/cookies
The second question is more of opinion based. I personally don't see any benefits in saving simple readonly data from localStorage in Vuex.
In the app I'm working on it's a fairly big codebase and components/pages are sometimes based on user roles. Admins will be able to see certain buttons or sections while regular users are not.
I need to modify a lot of the existing pages/components to accommodate a new role that's being added, which is view-only-admin.
This role will only be able to see everything including calendars, tasks, etc. but they are not allowed to make any sort of updates.
It would be a tremendous amount of work to go through the template of each component and file and look for v-if admin and also add a view-only-admin as well as make every single button or submit/click method behave differently for a view-only-admin role.
What would be the best way to handle this for the entire app? Re-writing and modifying v-if and submit methods seem like a bad use of time.
I've only been working with Vue/Nuxt for a few months, but I have read Mixins are pieces of code that you can reuse.
Would it be possible to write a mixin so that if the role is "view-only-admin" and there's an action that is a put/Post call, then they are not able to perform those API calls and presented with an error message?
I'm not sure how to go about properly implementing this feature. If I am able to stop all PUT/POST calls using a mixin, it would just redirect to a 404 right?
Thoughts?
If you are using axios for POST/PUT methods, then you should definitely check Interceptors.
But if you add only an interceptors without UI updates - your users may be confused why some buttons exist but doesn't work as expected.
I have a rather big form which I post to an API backend. The form has about 17-20 fields, depending on the status of a checkbox.
My plan is that after the user fills out the form I will validate it using Vuelidate and then display a summary of the data to give the user the possibility of reviewing their data. After the user reviews the data and considers that is correct, it posts the form to the backend API.
To do this, I plan on using Vuex to store the form object, and use the store to display the fields in the form and also on the summary page.
Is this a good approach, to store the form object in Vuex? If so, where I define the validation rules in store.js?
Thank you very much for your feedback!
You don't really need Vuex for this.
You can keep your form validation rules in your component itself. If you have something of a form builder or a different component that takes care of your form, you can keep your validation rules there or accept the entire form model through prop from the Component where you want to use the form.
Once the submission is done, you can pass the data to your Summary page via route itself. Check this out - https://router.vuejs.org/guide/essentials/passing-props.html
Whenever you think about Vuex or any state management solution think about the lifecycle of that data. How long is it needed to persist. In most cases, you'll find that it belongs to one view or two.
Vuex is good for cases where you need a piece of data to persist for way longer, possibly entire duration of the app. Example - User Details, Theme Settings, Experience Configuration etc.
Let me know how it goes.
I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)