Is it possible to change vuex store from browser? - vue.js

I am using vue.js and vuex.
I am storing if user has shared the product on facebook and if yes, let him buy it on a lower price than original. I am storing if he has shared or not on my database and prices are also stored on my db.
When user accesses any of the main pages, i make an api call and load that information in store. Then on checkout page i check that information in vuex store. As i dont want user to go to my vuex store and change that information directly because he would buy the product with a low price without sharing.
Is it possible to change store data from browser or any other ways other than my code ?

I find it unethical.
Hopefully if your information isn't validated by the back-end, there's no way ensuring if some piece of data on front-end is not manipulated. So simply - user can always fake it. However, most of the users will never open devTools and therefore will not know how to manipulate it.
Appendix: when encounter such swindling I usually just share the post with visibility restricted to myself only. So far it have always worked. So, even if one shares it, is it really shared? 🤔
Wish you success

Related

Shopify app for altering the default checkout procedure

I need to create a solution for altering the checkout process.
Better said, I need to add some functionality to it with a remote app (I am not sure if this is the right way to do it).
Mainly, what is needed represents a process that calls an external API, using a private API key from a delivery company, that registers a pick-up from the buyers house and sends the product to our headquarters.The process should be started when the user completes the entire checkout system from shopify, after payment.
After that, some AWB should be returned to the users checkout page, or some response regarding the creation of the pick up.
My question is, let's say, using some language like javascript with node and Koa or express, how one can achieve that? I can't find any tutorials or something that would help me do this.

Shopify - Embedded App - User session and webhooks

I'm fairly new to Shopify development and I'm trying to understand the best way to address our requirement. Apologies if some of these are basic questions.
The intent is to build an embedded public application that is intended to:
Have a floating component that's present on all pages on the online
store.
React to the user journey e.g. do stuff when the user adds
items to cart, completes a checkout, etc.
Send events to our server through the journey to allow our server to provide relevant
info, regardless of the store theme.
Have the ability to do this at an individual session level i.e. not all users will have the same experience.
I had a few questions around this:
Will it be possible to add the script to the main theme page and
have it load on all pages?
Is there a better alternative, particularly if the integration is supposed to be light-touch for admins?
What is the best way to get access to the individual user session from the app (assuming we can request the appropriate permissions as a part of the app installation)?
Is app bridge and session token required for this?
Is it possible to build this app using Angular? I understand Shopify framework is API-based and in theory any UI framework should work, but will a deeper linking with the user session be possible with Angular?
If we get enable web hooks for the various events, would it be a reliable way to detect events happening in the user journey? If so, what will be the correlation id between the events from the app and the web hooks?
Is it possible to detect the page the user is in, regardless of the theme? For example: Is there a way to identify that the user has added an item to the cart regardless of the theme used or is a webhook our best bet for those events?
Thanks in advance!
There is one thing you can do that would support most of your needs. Create an App, and set that App up with a Proxy. Shopify will then support the customer centric store theme to use a secure Ajax callback to your App using the proxy. So you can always call a proxy like /tool/customer_check with or without a customer ID from anywhere in the store.
You can imagine how powerful that is. You can return Liquid or more commonly, JSON. Boom! You're in business.
Of course, there are alternatives, all with the caveat your mileage may vary. None of this is predicated on any particular tech stack, meaning you can use what you like and know.

Vue composition api persisting state on refresh

I have a basic composition function which pulls in data from an api.
This is fine there are lots of good examples
https://vueschool.io/articles/vuejs-tutorials/state-management-with-composition-api/
I can share state between pages but refreshing any page resets my data. Is there a standard or good practice way to handle this? I use vuexpersist with vuex to solve this.
Are people just writing manually to localstorage?
If you refresh or reload, the "state" is expected to be missing since you are loading the app again. If you need data persistency then manually writing to local storage is the common action (so that is a yes for your last question).
You need to manually write the state recovery for your app, could it be by restoring data from local storage, retrieving data again from the API or even restoring the user session if you need authentication.

Best practice for fetching data from API periodically and provide it globally (for every Screen)

I'm working on a game-companion app and I was looking for a neat way to fetch data from multiple APIs initiated by starting my app (and maybe also if the user is refreshing the current page with swipe-to-refresh).
The thing is, I planned a dashboard-style homescreen (mostly reduced data from every API), where the user can navigate to different pages (all fed with different API's) and get detailed information for the specific section. I'm not sure how I can provide the API-data 'globally'.
I feel like my main.dart would be way too overloaded, but i can't think of any other way.
What's your thought on that?
Few approaches:
You can use a persistent db and write a wrapper DAO over it that such that anybody with access to this DAO object can write and read from DB. Packages like sqlite help in this regard.
If you are adopting bloc way of state management in your flutter app, then you can create blocs which could be used to share data across your app. flutter_bloc is a good place to start with this.
Via Singleton , If you want a sensitive data that needs to be available within the app globally, then you can create a singleton class that provides read and write from a secure vault. For this secure vault, flutter_secure_storage is convenient or shared_preferences for non sensitive data

manage api calls when using vuex

I am currently working on an asset manager for network/server infrastructure in vue.js.
I am also using vuetify for the look and feel since the goal is to create a progressive web app. Engineers can use their phone to scan tags on company assets to request details.
Currently all data is loaded into the app using a rest api. I am using vuex for state management in the application.
I would like some insights in to when to launch these api requests.
So there is some data i currently load at the start of the web app just after logging in when the main core view is loaded. This is impacting performance. Some examples of loaded data:
-> asset types,vendors,suppliers,...
This data is used in a lot of places in the application. (forms,filters,...)
I prefer not to call the vuex actions to perform the api request form inside a specific component since this could lead to unnecessary request when browsing the app.
The only exception to this being the assets them self since this is a lot of data to load at the start.
The problem i am facing is that on mobile platforms loading the data each time at the start of the app is a waste of data connection. It is possible that the engineer is using the app without actually needing the data.
I know this is kind of an abstract question, i am not looking for the one final awnser. Just some insight or recommendations from the community.
Correct me if I misunderstood but it sounds like you are prefetching a lot of non critical information all at start up. You should really focus on when that data is actually needed and reach out and retrieve it only when its actually needed. A common case of this is on route change, so if you have multiple pages within your app an admin page is likely going to need data that your home screen doesn't need. Wait until you navigate to that page before you retrieve information specific to that page. This is commonly done within the beforeRouteEnter router hook or created life cycle hook. Now to build on this, it may take some time to download that new data after a route change - the page could render before all of its necessary data has been made available. You can use a library like Vue-Promised to handle that intermediate state for sections that require data that is still loading. This allows you to let the page render quickly without having to wait on all of its data.
A couple other tips to further optimize things:
If you data that doesn't change often, sometimes it doesn't hurt to persist that data within the browser, either using the Cache-Control http header when making your http calls or by using something like the browsers LocalStorage or one of the hard persistence methods available within the browser. Theres a number of Vuex plugins that make this really easy, ex. vuex-persist. On startup you can load this data from storage which is faster than making a network call, your app will be able to respond faster and you can even go and make that network request in the background to refresh that data after the page has rendered.
If retrieving large sets of data is an issue then you can page the data to retrieve it in smaller chunks and only retrieve additional "pages" fo data when the user needs it. In tables this is commonly done using pagination buttons or infinite scrolling. Theres a number of libraries that do both of these as well, pagination would likely be built into the vuetify libraries table component.