I'm having an issue where the store data "menus" is not updated after i do a login.
Appearantly.. the object "loggedInUser" is not sat before i call "getMenus".. I'm not sure what i'm doing wrong here...
PS! When debugging in chrome, i notice that loggedInUser is "null" when entering the api call (see api.js codesnippet).
Login.vue (method) :
methods: {
doLogin() {
this.errorMessage = '';
this.loading = true;
let userCredentials = {
'username': this.loginEmail,
'password': this.loginPassword
};
this.$store.dispatch('tryLogin', {
'login': this.loginEmail,
'password': this.loginPassword
}).then((response) => {
this.$store.dispatch('getMenus')
.then((response) => {
this.$router.push('/')
});
});
}
},
Menus.vue (same as /)
computed: {
menus() {
return this.$store.getters.menus
}
},
created() {
this.$store.dispatch('getMenus')
},
methods: {
viewMenu: function(item) {
console.log("=> View Menu : " + item.Name)
this.$router.push('/viewmenu/' + item.Id)
}
}
}
store.js (getMenus action AND tryLogin)
actions: {
getMenus({ commit, getters }) {
api.getMenus(getters.loggedInUser)
.then(menus => {
commit('UPDATE_MENUS', menus);
});
},
tryLogin({ commit }, credentials) {
api.tryLogin(credentials)
.then(loggedInUser => {
commit('LOGGED_IN_USER', loggedInUser);
});
},
api.js (getMenus function)
getMenus(loggedInUser) {
var hostname = 'http://myurl'
var config = {
headers: {
'Content-Type': 'application/json'
}
}
var endpointUrl = hostname + '/api/Menu/GetMenus';
if (loggedInUser != null){
endpointUrl = hostname + '/api/Menu/GetMenusForSubCompany/' + loggedInUser.encryptedsubcompanyid;
}
return axios.get(endpointUrl, config)
.then(response => response.data);
},
From your store.js snippet, it seems you forget to return the promise.
Related
I have a Vue application. I would like to retrieve entries (from a database) based on a userid. I have the following methods in Vue:
export default {
name: 'Entries',
data() {
return {
userid: null
};
},
methods: {
getEntries() {
this.getUserID();
console.log("userid getEntries: " + this.userid);
axios.get('/entries', this.userid)
.then((res) => {
this.entries = res.data;
console.log(this.entries);
})
.catch((error) => {
console.error(error);
});
},
getUserID() {
axios.get('/userid')
.then((res) => {
this.userid = res.data;
console.log("userid getUserId: " + this.userid );
})
.catch((error) => {
console.error(error);
});
},
},
created() {
this.getEntries();
}
};
Within the getEntries method, I'm immediately calling the getUserID function. I would assume this sets the variable userid to the value retrieved from the getUserID method.
Instead I get the following output in the browser console, in exactly this order:
userid getEntries: null
userid getUserId: user_a
Why does it print first the console output from the getEntries function? And why is this null if it first executes the getUserID method?
How could I change is so that the axios call /entries can pass the userid.
axios calls are async, if you need the userid populated before anything else is called, then you should populate before anything else is called, in mounted/created.
Then you can react to its change with a watcher. You could call getEntries when the getUserID call resolves but it's dirty and couples the two methods.
And don't forget to assign entries in data.
This will work:
export default {
name: 'Entries',
data() {
return {
userid: null,
entries: []
};
},
watch: {
userid (v) {
if (v) this.getEntries()
}
},
mounted() {
this.$nextTick(this.getUserID)
},
methods: {
getEntries() {
console.log("userid getEntries: " + this.userid);
axios.get('/entries', this.userid)
.then((res) => {
this.entries = res.data;
console.log(this.entries);
})
.catch((error) => {
console.error(error);
});
},
getUserID() {
axios.get('/userid')
.then((res) => {
this.userid = res.data;
console.log("userid getUserId: " + this.userid);
})
.catch((error) => {
console.error(error);
});
}
}
};
Using async/await
export default {
name: 'Entries',
data() {
return {
userid: null,
entries: []
};
},
watch: {
userid (v) {
if (v) this.getEntries()
}
},
mounted() {
this.$nextTick(this.getUserID)
},
methods: {
async getEntries() {
try {
const { data } = await axios.get('/entries', this.userid)
this.entries = data;
} catch (error) {
console.error(error);
}
},
async getUserID() {
try {
const { data } = await axios.get('/userid')
this.userid = data;
} catch (error) {
console.error(error);
}
}
}
};
Since getUserId is asynchronous, it doesn't return immediately. You therefore need to wait for it to return before continuing. This can be done using then but, nested Promises are a bit unpleasant to work with. A simpler option is to use async/await instead:
async getEntries() {
await this.getUserID();
console.log("userid getEntries: " + this.userid);
axios.get('/entries', this.userid)
.then((res) => {
this.entries = res.data;
console.log(this.entries);
})
.catch((error) => {
console.error(error);
});
},
First, I'm using vuex and axios.
store: commentService.js
components:
CommentBox.vue (Top components)
CommentEnter.vue (Sub components)
This is the logic of the code I wrote.
In the store called commentService.js, there are mutations called commentUpdate.
And There are actions called postComment and getComment.
At this time, In the component called CommentBox dispatches getComment with async created().
Then, in getComment, commentUpdate is commited and executed.
CommentUpdate creates an array of comments inquired by getComment and stores them in a state called commentList.
Then I'll get a commentList with "computed".
CommentEnter, a sub-component, uses the commentList registered as compounded in the CommentBox as a prop.
The code below is commentService.js.
import axios from 'axios'
export default {
namespaced: true,
state: () => ({
comment:'',
commentList: []
}),
mutations: {
commentUpdate(state, payload) {
Object.keys(payload).forEach(key => {
state[key] = payload[key]
})
}
},
actions: {
postComment(state, payload) {
const {id} = payload
axios.post(`http://??.???.???.???:????/api/books/${id}/comments`, {
comment: this.state.comment,
starRate: this.state.starRate
}, {
headers: {
Authorization: `Bearer ` + localStorage.getItem('user-token')
}
})
.then((res) => {
console.log(res)
this.state.comment = ''
this.state.starRate = ''
)
.catch((err) => {
alert('댓글은 한 책당 한 번만 작성할 수 있습니다.')
console.log(err)
this.state.comment = ''
this.state.starRate = ''
})
},
async getComment({commit}, payload) {
const {id} = payload
axios.get(`http://??.???.???.???:????/api/books/${id}/comments`)
.then((res) => {
console.log(res)
const { comment } = res.data.commentMap
commit('commentUpdate', {
commentList: comment
})
})
.catch((err) => {
console.log(err)
commit('commentUpdate', {
commentList: {}
})
})
}
}
}
The code below is CommentBox.vue
computed: {
commentList() {
return this.$store.state.commentService.commentList
}
},
methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
})
}
},
async created() {
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
}
The code below is CommentEnter.vue
created() {
this.userComment = this.comment
},
props: {
comment: {
type: Object,
default: () => {}
}
},
I asked for a lot of advice.
There were many comments asking for an axios get request after the axios post request was successful.
In fact, I requested an axios get within .then() of the axios post, and the network tab confirmed that the get request occurred normally after the post request.
But it's still not seen immediately when I register a new comment.
I can only see new comments when I refresh it.
How can I make a new comment appear on the screen right away when I register it?
Can't you just call getComment when postComment is finished?
methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
}).then(function() {
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
})
}
},
}
Or since you're using async:
methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
await this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
})
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
}
},
}
When I login I am redirected to secret page which needs JWT authentication. Data is loaded on secret page. And when I refresh the window - data is lost. How can I fix it?
I use eventBus to send a JWT token to sibling template.
Login view method on submit:
submitSignin() {
console.log("submit!");
this.submitted = true;
this.$v.$touch();
if (this.$v.$invalid) {
return; // stop here if form is invalid
}
axios
.post("http://localhost:3000/auth/login", this.authData)
.then((res) => {
this.token = res.data.token;
this.authData.email = "";
this.authData.password = "";
this.$v.$reset();
this.successMsg = "You Sign in Successfully!";
this.$router.push({ path: "/auth/all-users" });
this.$nextTick(() => {
eventBus.$emit("sendtoken", this.token);
});
})
.catch((err) => {
console.log(err.response.data.message);
this.errorMsg = err.response.data.message;
});
},
SecretPage view:
<script>
export default {
name: "SecretPage",
data() {
return {
users: [],
};
},
methods: {
loadUsers() {
let self = this;
eventBus.$on("sendtoken", (token) => {
axios
.get("http://localhost:3000/auth/all-users", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => {
console.log(token);
console.log(response.data.users);
self.users = response.data.users;
})
.catch((err) => {
console.log(err);
});
});
},
},
mounted() {
this.loadUsers();
},
};
</script>
loaded users
I'm trying to display text on button based on data variable and call a function for vue.js axios method. I'm able to show text on button based on data variable but unable to call axios post method .I'm getting below error. When I click the button, url "http://localhost:8085/#/applicationtab/3" changes to http://localhost:8085/?#/applicationtab/3.
<span v-if="user.user_role_id ==results.desk_user_role_id">
<button small color="primary" style="width:400px;" #click="forward" v-show="forwardTo">{{ forwardTo }}</button><br>
<button small color="primary" style="width:400px;" #click="revert" v-show="revertTo">{{ revertTo }}</button>
</span>
data() {
return {
user: [],
roles: {
2: { name: 'Registration', next: 4, previous: 0 },
4: { name: 'Technical', next: 6, previous: 2 },
6: { name: 'Executive', next: 0, previous: 4 },
},
};
},
mounted() {
const currentuserUrl = 'api/profile';
VueAxios.get(currentuserUrl, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
}, {
timeout: 100000,
})
.then((response) => {
// debugger;
this.user = response.data;
// console.log(response.data);
// debugger;
});
computed: {
forwardTo() {
const { next } = this.roles[this.user.user_role_id];
return next ? `Forward to ${this.roles[next].name}` : false;
},
revertTo() {
const { previous } = this.roles[this.user.user_role_id];
return previous ? `Revert to ${this.roles[previous].name}` : false;
},
},
methods: {
forward() {
this.$refs.form.forward();
const url = `/api/registration/${this.$route.params.id}/forward`;
VueAxios.post(url, this.forward_message, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${window.localStorage.getItem('token')}`,
},
}, {
timeout: 10000,
})
.then((response) => {
if (response.status === 200) {
// this.successmessage = 'Forwarded successfully.';
this.message = 'Forwarded successfully.';
}
})
.catch((error) => {
console.log(error);
});
},
revert() {
const url = `/api/registration/${this.$route.params.id}/revert`;
VueAxios.post(url, this.forward_message, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
Authorization: `Bearer ${window.localStorage.getItem('token')}`,
},
}, {
timeout: 10000,
})
.then((response) => {
if (response.status === 200) {
// this.successmessage = 'Forwarded successfully.';
this.message = 'Reverted successfully.';
}
})
.catch((error) => {
console.log(error);
});
},
computed: {
forwardTo() {
const { next } = this.roles[this.user.user_role_id];
return next ? `Forward to ${this.roles[next].name}` : false;
},
Error is ocurring because of this part I think. this.roles[next]
I can't find roles property on your properties(data and computed)
Is this a prop from parent component?
You need to check if the roles property or props and its child property next exist.
this.user is an array or object? If it is an array containing an single object then, you must try this.user[0].user_role_id, or if it is an object so there may be a user id which is not present as a key in the roles object.
For that you can use this in your computed property.
forwardTo() {
const tempObj = this.roles[this.user.user_role_id];
return tempObj ? `Forward to ${this.roles[tempObj.next].name}` : false;
}
I'm not able to post a form data on my server files as formData from my store.
Checking the state before submit I can see that image and video properties have formDatas as values, but on submit the params of the request are empty object
<template>
<input type="file" #change="onImageSelected($event)" accept="image/*" >
</template>
methods: {
submit() {
this.$v.$touch()
if (this.$v.$invalid || this.tags.length > 3) {
this.submitStatus = 'ERROR'
} else {
this.submitStatus = 'PENDING'
this.$store.dispatch('exercises/storeExercise')
}
},
onImageSelected(event) {
this.image = event.target.files[0]
if (this.image.size < 8000000) {
const formDataImage = new FormData()
formDataImage.append('image', this.image)
this.$store.dispatch('exercises/commitImageSelected', formDataImage)
}
},
}
const state = {
exercises: [],
tags: [],
selectedExercise: null,
selectedComponent: BeforeSelect
}
const mutations = {
setImageSelected(state, image) {
Vue.set(state.selectedExercise, 'image', image)
},
setVideoSelected(state, video) {
Vue.set(state.selectedExercise, 'video', video)
}
}
const actions = {
commitImageSelected({commit}, image){
commit('setImageSelected', image)
},
commitVideoSelected({commit}, video){
commit('setVideoSelected', video)
},
storeExercise({commit, state}) {
axios.post('exercises', state.selectedExercise)
.then(({data}) => {
commit('setExercises', data)
})
.catch(err => console.log(err))
},
}
Try this axios post in storeExcerise method.
axios.post('exercises',state.selectedExercise,{
headers: { 'Content-Type': undefined},
}).then(function (response) {
if (response.data.ok) {
}
}.bind(this));
This is working fine for me while uploading file to server.