Accessing Vue Store values in Router - vue.js

I need to access a variable from my store in my router. This variable is called 'isAdmin'. Now, when I'm using the following code, I'm getting the initial state (which has the value of 'false'):
console.log(store.state.isAdmin)
Although I've updated the 'isAdmin' value to 'true' committing an action, the state of 'isAdmin' continues to be as the initial state.
Now, if I console.log the following object:
console.log(store.state)
I see this:
My question is: How do I get to the value of isAdmin after I've amended it in my store?
Thank you!!!

Related

Delay Vuelidate validation until data fetched from remote API

I have added Vuelidate to my Quasar 2 application with a very simple required validation on an input field. The validation itself works fine but here's my problem:
The component's fetches some data from an API in its onMounted function. This data is used to initially populate the form. For the time loading, however, the input field is evaluated as invalid. Only once data have arrived, the input field becomes valid.
Is it possible to start the validation only once the API call has finished?
Please see the following example on Codesandbox which "simulates" the loading process by adding a timeout of 5 seconds:
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/Index.vue
I changed the v-model attribute to use that of Vuelidate and, additionally, use the $error property instead of $invalid.
<q-input
v-model="v$.title.$model"
:error="v$.title.$error"
/>
This seems to work, that is, the field is initially validated until the data have been fetched. If the user then clears the field, it becomes invalid.
https://codesandbox.io/s/prod-forest-7u0916?file=/src/pages/Index.vue

SubmitForm then Patch results in "The data returned by the service was invalid"

I'm building a PowerApps app on Azure SQL
The requirement
I have a form which has "Save" and "Confirm" buttons.
Both buttons should save the form data. The Commit button should also set database column "Confirm" to 1
I've read at length about how I can programatically override the update value of a hidden control for this. But I'm not satisfied with the level of complexity (maintenance) required to get this working, i.e.
Populate a variable with the current db value
In the button code set the variable value
In the form field, set the update property to the variable
What I'm Trying
So I'm trying a different approach: SubmitForm then Patch. Even though this requires an extra database call, I'd like to understand if this will work. This is the code for OnSelect in the commit button:
// Save the record
SubmitForm(frmEdit);
// Update confirmed to 1
Patch('[dbo].[Comments]',cRecord,{Confirmed:1});
Some Complexities
Note that my record is a variable, cRecord. In short I want this app to be able to upsert based on URL parameters.
This is my App.OnStart which captures URL values, inserts a record if required. Regardless, the result of this event is that cRecord is set to the record to be edited.
// Cache employees and store lookups (as they are in a different db)
Concurrent(Collect(cEmployees, Filter('[dbo].[SalesPerson]', Status = "A")),Collect(cStores, '[dbo].[Store]'));
// Check for parameters in the URL. If found, set to Edit/Add mode
Set(bURLRecord,If((!IsBlank(Param("PersonId")) && !IsBlank(Param("Date"))),true,false));
// If URL Parameters were passed, create the record if it doesn't exist
If(bURLRecord,
Set(pPersonId,Value(Param("PersonId")));
Set(pDate,DateValue(Param("Date")));
// Try and find the record
Set(cRecord,LookUp('[dbo].[Comments]',SalesPersonId=pPersonId && TransactionDate = pDate));
If(IsBlank(cRecord),
// If the record doesn't exist, create it with Patch and capture the resulting record
Set(cRecord,Patch('[dbo].[Comments]',Defaults('[dbo].[Comments]'),{SalesPersonId:pPersonId,TransactionDate:pDate}))
);
// Navigate to the data entry screen. This screen uses cRecord as its item
Navigate(scrEdit);
)
frmEdit.Item is set to cRecord. As an aside I also have a gallery that sets this variable value when clicked so we can also navigate here from a gallery.
The navigating using new and existing URL parameters works. Navigating from the gallery works.
The problem
When I press the Commit button against a record which has Confirmed=0 I get this popup error:
The data returned by the service is invalid
When I run this code against a record which already has Confirmed=1 I don't get an error
If I run the PowerApps monitor it doesn't show any errors but it does show some counts being run after the update. I can paste it here if required.
I also tried wrapping the Path in a Set in case it's result was confusing the button event but it didn't make a difference.
What I want
So can anyone offer me any of the following info:
How can I get more info about "The data returned by the service is invalid"?
How can I get this to run without erroring?
Is there a simpler way to do the initial upsert? I was hoping a function called Patch could upsert in one call but it seems it can't
With regards to the setting field beforehand approach, I'm happy to try this again but I had some issues implementing it - understanding which control where to edit.
Any assistance appreciated.
Edit
As per recommendations in the answer, I moved the patch code into OnSuccess
If(Confirmed=1,Patch('[dbo].[CoachingComments]',cRecord,{Confirmed:1}));
But now I get the same error there. Worse I cleared out OnSucces and just put SubmitForm(frmEdit); into the OnSelect event and it is saving data but still saying
The data returned by the service was invalid
First things first,
Refactoring has multiple steps,
I can t type all out at once...
The submitform and patch issue:
Never use the submitforn with extra conplexity
Submitform is only the trigger to send the form out,
The form handler will work with your data...
If you hsven t filled out the form correctly, u don t want to trigger your patch action...
So:
On your form, you have an OnSucces property,
Place your patch code there...
Change your cRecord in your patch statement:
YourForm.LastSubmit

Vuex access data property

I am using vue-offline but I can't use it in store to check online status.
In components I can access as:
if (this.isOnline)
or in template with
v-if="isOnline"
In store (module) I tried:
if (this._vm.$isOnline)
but it returns always false.
How do I access it in vuex?
You can pass the online status as an argument from your component...
or you can easily check the online status using navigator.onLine (used by vue-offline, see the file).
So it will be in your store:
if (navigator.onLine)
Here is an example showing the online status in the console using both methods:
https://codesandbox.io/s/vuex-store-9zhy3

Access session data from Vuejs

I try to access data from session, but I don't get anything.
In Controller I use: session()->get('cas_user') ?? ""; , and I get some date.
In Vuejs I try this: this.$session.get('cas_user') , and I don't get anything.
Also this.$session.exists() is false.
I have vue-session.
Have you initialized a session before accessing its values (that is why this.$session.exists() returns false)?
this.$session.start()
Have you saved something inside the 'cas_user' key before trying to get it?
this.$session.set('cas_user', value)
You can also try this.$session.getAll() to see if ther is some data saved in the session.

Generic way to revert to old state if asynchronous action failed?

I am keeping all state in the store, and handle all async actions using redux-sagas.
So if I for example have an integer field, the changing of which should fire an async action, I connect the TextInput value to the actual value in the store.
As soon as the user changes the value and leaves the field, I dispatch an action.
This will be picked up by a saga, which will call an API. But if that fails, I need the previous value restored. What is a good way to handle that?
Currently I pass the old and new value in the action, so that the saga can put a new action to restore it, but this feels like a kludge. Hasn't this been encountered before?
Well, if you want to restore the old value you will have to store it somewhere. However, rather than passing both old and new value to your action I would just remember the old value in your state.
Your state might look like this:
const state = {
value: 5,
oldValue: 4
};
Then when the value changes, you will update oldValue to value and value to new value. If the API call fails you can just set value to oldValue again.
Full example: https://codesandbox.io/s/0RORjNm8y