I currently have a Vue.js 2 SPA using Vuex for inter-component communication and Vuex-persisted state to persist my shared state.
However, I want to persist a component's local private data.
I tried the package vue-persist and it persists the component data fine, however, the variables are not namespaced and therefore shared between all component instances. I want to persist each component's data separately.
Does anyone know how I can achieve these 2 things in my Vue.js 2.x app?
1) Persistence of my local data (so it survives a browser refresh).
2) The persisted data is not shared with other components (perhaps name-spaced for each component instance?).
Thanks!
I'm not familiar with vue-persist, but it looks like you can pass a store name as the second argument to $persist. Choose a unique store name for the component instance (this will vary depending on the component).
e.g.
created() {
this.$persist(['foo'], 'my-comp:' + this.id);
}
Related
My question is, what's the point of setting up Vuex for the server when the state will be overwritten when the client side hydration takes place?
I have some data (Helm env variables) that I want to store in the vuex store for later use.
These variables is only available to me on the server, so I started trying to add them to the store in my createApp script when running on the server.
The store state however is reset when the client side hydration kicks in, so no env variables left.
Google told me I should use like window.INITIAL_DATA to set the state again on the client:
store.replaceState(window.INITIAL_DATA)
But if have to use the window object to pass store data to the client, what's the point of using Vuex on the server at all?
Isn't it better to skip Vuex overhead on the server and just use Vuex on the client and populate it with INITIAL_DATA?
I'm probably missing something..
https://ssr.vuejs.org/guide/data.html#data-store
During SSR, we are essentially rendering a "snapshot" of our app. The asynchronous data from our components needs to be available before we mount the client side app - otherwise the client app would render using different state and the hydration would fail.
To address this, the fetched data needs to live outside the view components, in a dedicated data store, or a "state container". On the server, we can pre-fetch and fill data into the store while rendering. In addition, we will serialize and inline the state in the HTML after the app has finished rendering. The client-side store can directly pick up the inlined state before we mount the app.
Also to mention:
The data you access while SSR in any Component needs to come from somewhere if you want to share information across Components, this is what Vuex is there for.
I have turned several axios requests made by application from 3 sibling components into one. So this query now brings back all the information in one simple request. Trouble is I'm not sure architecturally, where it makes sense to perform the request, store the data and propogate the response to the three sibling components.
Should I store the response in an application-Level shared state ? Also then how do I propogate the response, to these 3 sibling comnponents using Vuex?
if it is critical data then you might want to request it in Vuex nuxtServerInit action and save it in vuex state using commit. Read more
That way your app will receive the info once when it renders on server & can be used from any page or component using vuex getters.
I'm trying to initialize a Shopify AppBridge instance (https://shopify.dev/tools/app-bridge) one time per store (user), and then use that same instance throughout my app to use the various AppBridge features.
My original idea was to add the AppBridge instance into a Vuex store; but I am unable to call any functions within the AppBridge object when retrieving it from the store (something to do with it being a serialized object?). There are various functions I need to use within the instance/object; so this won't work.
So, what is the best way for me to do the following:
App loads
Middleware or function runs, initializing AppBridge with the user's / store's details
Other pages are loaded, use the same AppBridge instance for various features
My current setup is that I re-create a new AppBridge instance on every page / component, but that causes complications.
Any ideas? Much appreciated!
due to the structure of our websites we currently are unable to create one main app instance, as there is too much HTML within this.
So instead we are currently looking for the class of app and then creating a new Vue instance per component, which isn't great for communicating between components but it's our current work around.
We are working to create a new structure to support just one overall app. However, just wondering if creating a new instance of Vue for each component is bad for browser performance over having just one instance with the component inside this?
Short answer: No
There won’t be any performance difference between an app that uses a root Vue component with child components and an app that uses multiple root Vue components.
All components are still just Vue instances - so it isn’t any different. The only difference is the organization and usage of the instances.
For example I have simple TODO app.
Task represented by Task component. As storage I use Vuex.
For each task I store structure like
{
id: 999,
label: 'My super task',
done: true
}
Questions is what I have to pass to the component as property - only id (and then get other data from store) or the whole data array?
Passing whole data will make the your Task component independent from store.
Passing only ids of tasks will make your Task component dependent on store for tasks data.
Since Task is representing a single card, I think making it dependent on the store will increase the calls to the store since n number of tasks will call store for data.
It is better to get the data from store once and then enumerating the data using v-for directive and passing whole task object to your Task component.
So you can pass it however you like. Keep in mind, if you're using Vuex, you don't need to pass anything as a prop since you have a central source of truth. Instead, you can call straight from the state or use a getter.
Inside your child component, you can refer to the store with $store in the template and this.$store in the script.
For example:
const myTasks = this.$store.state.tasks (if tasks is an array or collection of some sort)
const myTask = this.$store.state.tasks[0]
Then you have myTask.id, myTask.label, etc.
If you need a more specific example, please post more code and let me know.