PAGE
Vue Js – Vuex Getters Parameters
Getters with parameters , module with namespaced : true
store.js
const getters = {
getGettersWithParameters : (state,getters) => (paramVar1,paramVar2) => {
console.log(paramVar1);
console.log(paramVar2);
return paramVar1 + paramVar2;
}
};
....
export default {
namespaced : true,
state,
actions,
mutations,
getters
}
Vuex – Usage
component.js
<template >
...
{{ mycomputed }}
...
</template >
...
computed: {
...mapGetters({
'getGetWParam' : 'moduleName/getGettersWithParameters ',
}),
mycomputed: function() {
return this.getGetWParam('Param1','Param2');
},
}
Usage with Async/Await in a Guard
Now we can use this method throughout the app for tasks that do not require a stream, like database writes or in router guards as shown below:
app/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService} from './auth.service'
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService) {}
async canActivate(...): Promise<boolean> {
const user = await this.auth.getUser();
const loggedIn = !!user;
if (!loggedIn) {
// do something
}
return loggedIn;
}
}
