Question

我对Vuex来说还很陌生，很难理解如何处理从一个模块到另一个模块的状态更改。当前，我有一个名为transaction的模块，该模块执行Ajax请求，如果成功，它将关闭打开的Modal。我在名为“常规”的单独模块中设置了模态状态。我最初尝试设置模式的一般状态，但是将我的一般突变设为closeModal。我意识到这是行不通的，而且听起来好像Mutations不应该做这种繁重的工作。我一直在寻找另一种方法来处理这种工作，并且导致了“动作”，但是我不清楚如何实现它，甚至不清楚是否应该执行这种工作。有人可以让我知道“动作”是否是解决此问题的正确方法，或者是否还有其他方法可以解决我的问题。

我有一个称为事务的模块，该模块正在运行ajax请求，如果成功，则应关闭模式。为了这个问题，我简化了我的模块。

const Transactions = {
  state: {
  },
  mutations: {
    CONFIRM_TRANSACTION_CANCEL: function(state) {
      this.$store.commit('CLOSE_MODAL')
    }
}

我还有第二个模块称为General，我想将其用于常规状态管理和错误处理。我正在尝试将交易的变种称为此通用模块。

const General = {
  state: {
    modalState: null,
  },
  mutations: {
    ...

    CLOSE_MODAL: function(state) {
      state.modalState = null
    },

    ...
  }
}

Answer 1

您不应在突变内进行提交。突变只是为了改变状态。

您可以通过两种方式执行此操作：

1.-使用Vue的监视间谍事务状态。然后，如果交易正确完成，您将分派一个操作以关闭Modal。

2.-您可以调度一个操作以关闭启动ajax调用的操作（成功之后）内的模式。

apiCall({ dispatch, commit }) {
  api.get('/transaction')
    .then((response) => {
      dispatch('closeModal');
      commit('TRANSACTION_SUCCESS', response);
    })
    .catch((error) => commit('TRANSACTION_ERROR', error));
}

下面的这些方法都是在考虑模态的情况下完成的，因为它也应该使用vuex，但是，如果要简化，可以：

3.-通过prop将来自vuex的交易状态直接传递给模式，并使用它来处理模式。

将状态从一个模块更改为另一个Vuex

1 个答案: