Why attributes in dispatch don't come in actions (vuex)? - vue.js

I have a problem with sending data from vue to vuex.
When I am try send dates to vuex via 'let' - axios don't see these dates.
But when I am try input dates in axios request - ok, and I can see response.
Why it could be?

If you want to pass multiple params to Vuex actions you need to wrap them in an object, e.g.
loadIncomings(context, { clubId, dateFrom, dateTo })
Vuex considers the first param as the context and the second as the payload. That's why your clubId gets passed but all other params are discarded.

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

How to access Nuxt context variable from Vuex action

I want to access context variable to use the isMobile flag to select a different endpoint depending on the result. I could pass it on the dispatch from the component, but I know there should be one way to do it.
export const actions = {
...
signUpGoogle({ commit }) {
fireauth.useDeviceLanguage()
if (context.isMobile) {
fireauth.signInWithPopup(GoogleProvider).then ...
} else {
fireauth.signInWithRedirect(GoogleProvider)
}
}
I saw here that it can be obtained on server init, but I really don't want to rely on this as caching will mess things up
https://nuxtjs.org/guide/vuex-store/#the-nuxtserverinit-action
Thanks for the help
I'm not sure if you're talking about an environment variable here, but below is the answer if it is.
Looking on this GH issue, we can find out that you can use this.app.$config.isMobile (basically referencing env variables aka publicRuntimeConfig values in your nuxt.config.js).
You can do one thing in nuxtServerInit, set this variable in state using the context, and then use state.isMobile to do this type of API Calls. Hopefully, that should solve this.
If it's not very clear, I can edit to give some code examples

Accessing Vue Store values in Router

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!!!

Sails.js: How to access and modify req.params in middleware

I want to implement a mechanism to obfuscate the id fields in my application . Right now all the id fields are integers. I want to use some sort of reversible hashing to create random strings corresponding to the id fields. Also, I am trying to accomplish this with minimal changes to the overall project.
One thing that came to my mind was to write a middleware to intercept every request and response object and check for the presence of id field. If the request contains id field and it is an obfuscated version, decode the string and replace the request parameter with the integer id.
If the response contains the integer id, run the encode function on it to send the obfuscated id to the client.
The problem I am facing is with modifying the req object. The id field can be present in req.body or req.params or res.query. However, in the middleware, I cannot see the id field when it is present in req.params.
I tried using policies. But the problem I am facing there is even after changing the req.params, the changes are lost when the control reaches the controller. What would be the recommended way of solving this problem ?
Here is the sample code:
In the policy:
module.exports = function (req, res, next) {
req.params.id = '12345';
req.query.pageSize = 30;
req.body = {};
sails.log.info('req.params', req.params);
sails.log.info('req.query', req.query);
sails.log.info('req.body', req.body);
return next();
};
I am just modifying values of req.params, req.query and req.body.
When I try to access these values in the controller, the values of req.query and req.body are the modified values as changed in the policy. However, req.params changes back to what was sent by the client and the changes made in the policy are lost
I think you are confusing policy and middleware? Is your code above in api/policies? If so, you still need to define which controller(s) this policy is applied to in config/policies.
So config/policies.js should look like:
modue.exports.policies = {
// If you really want this policy for every controller and action
'*': 'policyName.js',
// If you want it for a specific controller. '*' denotes every action in controller
specificController: {
'*': 'policyName.js'
},
// If you want it for a specific action on a specific controller
specificController: {
'specificAction': 'policyName.js'
}
};
Also I'd like to add. Policies are generally meant for authorization of controllers but this seems like a decent use case. Since every single request is not going to have these fields this should be a policy. Policies are great when applying something to a handful of controllers/actions. Middleware is great when you need to apply to every single action that comes into your app.
http://sailsjs.org/documentation/concepts/policies
http://sailsjs.org/documentation/concepts/middleware
Gitter response:
sgress454 #sgress454 10:45
#mandeepm91
In the policy, if I change req.body or req.query, the changes persist in the next policy or controller. However, changes made to req.params are lost.
This is one of the main use cases for req.options. This object is intended to be used to store request data that can be mutated by one handler before being passed on to the next. The req.params object is meant to provide each handler with a copy of the original request parameters.
How you approach this really depends on what your goal is. If you really need each request handler (that is, policies and controller actions) to see an encoded version of the ID, then a good approach would be to encode the ID in a policy as #S-Stephen suggested, store that value in req.options.id and refer to that in your other request handlers. If, on the other hand, you're really only concerned with the response having the encoded ID, the suggested practice is to use the res.ok() response in your handlers (rather than res.send() or res.json), and adjust the code for that response in api/responses/ok.js to encode the ID before sending. You can also use a custom response if this is only required for certain requests. See custom responses for more info.
Hi #sadlerw, you should be able to modify the code for res.ok() in your api/responses/ok.js file to have it always return JSON if that's what you want for every response. If it's something you only want for certain actions, you could create a custom response instead and use that where appropriate.

Passing variables into JavaScript in ExpressJS/PassportJS/Jade app

This is essentially a continuation of the question here: Nodejs Passport display username.
app.get('/hello', function(req, res) {
res.render('index.jade', { name: req.user.username });
});
So users log in via PassportJS, and goes to index.jade, which contains #{name} in the body, which will be replaced by the value of req.user.username.
Question: Is it possible to use the value of req.user.username in index.jade's JavaScript? I tried assigning its value to a variable but it doesn't work.
I have been using the trick of having a hidden input with #{name} as value:
input(type='hidden', id='variableName', value='#{name}')
Then JavaScript can access this value using:
$("#variableName").val()
This works. But does it have any potential downside like security issues? What is the right way to do this?
You have a few options. One of them is what you did and put the value inside you html. You can also solve it by doing:
script
window.name = #{name};
This will create an inline script that sets the variable. The other option you have is using ajax. That means you probably need to make an extra route to reply to that request.