Question

我正在使用nuxtjs，axios和vuex从表单组件发布内容以将数据发布到后端。

发布后，我想重定向到查看记录屏幕，并使用ID导航到该屏幕，并使用返回的信息填充

所以我的路径可能是/ cases / 14325（如果14325是创建后返回的ID）

请问正确的方法是什么

我的vuex商店中有以下代码

export const state = () => ({
    cases: []
  })

  // ***  MUTATIONS  ***
  export const mutations = {
    add(state, newCase ) {
    state.cases.push(newCase)
  },

  }

  // ***  ACTIONS  ***
  export const actions = {
    addCase(context, newCase) {
    const createdCase = {
        ...newCase
    }
    axios.post("http", createdCase)
    .then(result => {
        context.commit('add', {...createdCase, id: result.data.name})
    })
    .catch(e => console.log(e));
    },
  }

在我的组件中，我有以下

    import { mapMutations, mapGetters, mapActions } from 'vuex'
export default {

  data () {
    return {
      newCase: {
        caseName: '',
        summary: '',
        status: 'live',
      },
    }
  },

  methods: {

     ...mapActions([
      'addCase' 
    ]),
    onSubmit() {
      // Save the post
      this.$store.dispatch('addCase').then(path => {
        this.$router.redirect(path)
      }).catch((err) => {
        console.log(err)
      })  
    },
  }
}
</script>

请问如何从商店退回新ID，并将case / 1替换为'/ cases /'+新ID？

一如既往地感谢您的帮助

Answer 1

当您以这种方式改善操作时，也许就足够了：

addCase(context, newCase) {
  return new Promise ((resolve, reject) => {
    const createdCase = {...newCase}
    axios.post('http', createdCase).then(result => {
      context.commit('add', {...createdCase, id: result.data.name})
      resolve(/*path*/)
    }).catch(e => {
      console.log(e)
      reject(/*reason*/)
    })
  })
}

然后您以这种方式使用它：

this.$store.dispatch('addCase', context).then(path => {
  this.$router.redirect(path)
})

通过vuex存储区中的axios发布后进行重定向的正确方法

1 个答案: