无法在我的组件中使用操作返回的值

Question

我的存储操作 returns 从我的组件调用该操作时我想检查的值。但出于某种原因，我得到的只是 undefined 而不是我实际从任何操作返回的任何值。

为什么？

存储操作：

export const actions = {
  async initialize ({ state, commit, dispatch }) {
    await this.$axios.get('myEndpoint')
      .then((res) => {
        return true
      }).catch((error) => {
        return false
      })
  }
}

组件代码：

async mounted () {
  const initializeResult = await this.initialize()
  console.log(initializeResult)
}

Answer 1

你必须尊重 vuex 存储模式，首先你应该创建一个可以在突变中突变的状态，它也可以在你的操作中的异步回调中提交：

export const state={
  initResult:null
}

export const mutations={
    SET_RESULT(state,payload){
      state.initResult=payload
   }
}

export const actions = {
  async initialize ({ state, commit, dispatch }) {
    await this.$axios.get('myEndpoint')
      .then((res) => {
        commit('SET_RESULT',true)
      }).catch((error) => {
           commit('SET_RESULT',false)
      })
  }
}

然后在您的组件中使用已计算的属性 :

computed:{
    result(){
       return this.$store.initResult;
  }
},
mounted () {
  this.$store.dispatch('initialize')
 
}

无法在我的组件中使用操作返回的值

Can't use value returned by action in my component

vue.js

vue-component

vuex