如何将数据从 vueJS 传递到 vuex
How can I pass data from vueJS to vuex
在这个例子中,我使用 axios 为我获取一些数据,然后我需要传递这些值并将其存储在 Vuex 中
带有 axios 请求的 vue 文件:
<script>
export default {
data: function () {
return {
userData: {},
login: {
username: '',
password: '',
},
}
},
computed: {
loggedInUser() {
return this.$store.state.loggedInUser;
}
},
methods: {
handleLoginFormSubmit() {
// send axios request to controller and from controller to gRPC
axios.post('/loginUser', this.login)
.then((response) => {
this.userData = JSON.parse(response.data[0]);
})
// set loggedInUser info to vuex store
this.$store.dispatch('loginUser',this.userData);
}
},
}
</script>
当我检查 userData 对象时,那里有我需要的所有信息
现在我有 store.js 文件应该传递该 userData 并将其保存在商店中,但我总是在里面得到空对象
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
loggedInUser: {
firstName: '',
lastName: '',
email: '',
uuid: '',
}
},
getters: {
loggedUser(state){
return state.loggedInUser;
}
},
mutations: {
loginUser: (state, payload) => {
state.loggedInUser.firstName = payload;
state.loggedInUser.lastName = 1;
state.loggedInUser.email = 1;
state.loggedInUser.uuid = 1;
}
},
actions: {
loginUser: (context, payload) => {
setTimeout(function () {
console.log(payload);
context.commit('loginUser', payload)
}, 3000)
}
}
});
我的突变看起来像这样
type:"loginUser"
payload:Object (empty)
我哪里做错了?
您在数据返回之前发送。将调度移动到回调中。
handleLoginFormSubmit() {
// send axios request to controller and from controller to gRPC
axios.post('/loginUser', this.login)
.then((response) => {
this.userData = JSON.parse(response.data[0]);
this.$store.dispatch('loginUser',this.userData);
})
}
在这个例子中,我使用 axios 为我获取一些数据,然后我需要传递这些值并将其存储在 Vuex 中
带有 axios 请求的 vue 文件:
<script>
export default {
data: function () {
return {
userData: {},
login: {
username: '',
password: '',
},
}
},
computed: {
loggedInUser() {
return this.$store.state.loggedInUser;
}
},
methods: {
handleLoginFormSubmit() {
// send axios request to controller and from controller to gRPC
axios.post('/loginUser', this.login)
.then((response) => {
this.userData = JSON.parse(response.data[0]);
})
// set loggedInUser info to vuex store
this.$store.dispatch('loginUser',this.userData);
}
},
}
</script>
当我检查 userData 对象时,那里有我需要的所有信息 现在我有 store.js 文件应该传递该 userData 并将其保存在商店中,但我总是在里面得到空对象
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
loggedInUser: {
firstName: '',
lastName: '',
email: '',
uuid: '',
}
},
getters: {
loggedUser(state){
return state.loggedInUser;
}
},
mutations: {
loginUser: (state, payload) => {
state.loggedInUser.firstName = payload;
state.loggedInUser.lastName = 1;
state.loggedInUser.email = 1;
state.loggedInUser.uuid = 1;
}
},
actions: {
loginUser: (context, payload) => {
setTimeout(function () {
console.log(payload);
context.commit('loginUser', payload)
}, 3000)
}
}
});
我的突变看起来像这样
type:"loginUser"
payload:Object (empty)
我哪里做错了?
您在数据返回之前发送。将调度移动到回调中。
handleLoginFormSubmit() {
// send axios request to controller and from controller to gRPC
axios.post('/loginUser', this.login)
.then((response) => {
this.userData = JSON.parse(response.data[0]);
this.$store.dispatch('loginUser',this.userData);
})
}