Vue/Nuxt 生命周期在 beforecreate 中调用 promise,在 created 中调用 getter
Vue/Nuxt lifecycle calling a promise in beforecreate and the getter in created
我正在尝试在我的 beforeCreate() 中为组件设置一组变量,然后在 created() 中获取该变量。本质上,我需要在我的商店中设置变量,然后获取该变量。我创建的调用了一个运行 axios 承诺的操作,该承诺将数据提交给状态,我在商店中有一个 getter,我想在我的 created() 中调用它来获取该数据。
我知道我从我的承诺中得到了正确的数据,正如我在我的控制台日志中看到的那样,我只是似乎无法从我的 getter.
中得到这些数据
好像并不想工作,我想是不是和axios还没有返回promise有关?如何确保我的 created() 等到 axios promise 在 beforeCreate() 中返回?
示例代码
..... 组件....
data(){
return{currentUser: null}
},
beforeCreate(){
this.$store.dispatch('users/setCurrent')
},
created(){
this.currentUser = this.$store.getters['users/current'].displayname
}
......商店......
export const state = () => ({
current: {}
});
export const mutations ={
setCurrent: (state, c) => (state.current = c)
}
export const getter = {
current: state => state.current
}
export const actions = {
setCurrent({commit, dispatch, rootState}){
this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
.then(res => {
console.log(res)
commit("setCurrent" res)
})
}
尝试等待你的行动得到回应:
export const actions = {
async setCurrent({commit, dispatch, rootState}){
await this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
.then(res => {
console.log(res)
commit("setCurrent" res)
})
}
然后在创建或挂载的钩子中:
async created() {
await this.$store.dispatch('users/setCurrent')
this.currentUser = this.$store.getters['users/current'].displayname
}
我正在尝试在我的 beforeCreate() 中为组件设置一组变量,然后在 created() 中获取该变量。本质上,我需要在我的商店中设置变量,然后获取该变量。我创建的调用了一个运行 axios 承诺的操作,该承诺将数据提交给状态,我在商店中有一个 getter,我想在我的 created() 中调用它来获取该数据。
我知道我从我的承诺中得到了正确的数据,正如我在我的控制台日志中看到的那样,我只是似乎无法从我的 getter.
中得到这些数据好像并不想工作,我想是不是和axios还没有返回promise有关?如何确保我的 created() 等到 axios promise 在 beforeCreate() 中返回?
示例代码
..... 组件....
data(){
return{currentUser: null}
},
beforeCreate(){
this.$store.dispatch('users/setCurrent')
},
created(){
this.currentUser = this.$store.getters['users/current'].displayname
}
......商店......
export const state = () => ({
current: {}
});
export const mutations ={
setCurrent: (state, c) => (state.current = c)
}
export const getter = {
current: state => state.current
}
export const actions = {
setCurrent({commit, dispatch, rootState}){
this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
.then(res => {
console.log(res)
commit("setCurrent" res)
})
}
尝试等待你的行动得到回应:
export const actions = {
async setCurrent({commit, dispatch, rootState}){
await this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
.then(res => {
console.log(res)
commit("setCurrent" res)
})
}
然后在创建或挂载的钩子中:
async created() {
await this.$store.dispatch('users/setCurrent')
this.currentUser = this.$store.getters['users/current'].displayname
}