Vuex - API 호출 전후에 상태 변경을 커밋하시겠습니까?

Vuex - API 호출 전후에 상태 변경을 커밋하시겠습니까?

Vue 및 Vuex는 처음인데 비동기 이벤트 중에 상태 변경을 커밋해야 하는 시기를 아직 정확히 알지 못합니다.

액션은 비동기 조작과 변환자를 호출해야 하는 곳입니다.단, 액션 내에서는 비동기 조작 전에 뮤테이터를 먼저 호출해야 하는지(예를 들어 데이터를 저장하기 위해 API 호출), API를 먼저 호출해야 하는지, 콜백이 성공했을 경우 뮤테이터를 호출하여 데이터 변경을 스테이트로 커밋해야 합니다.

감사합니다. 이 컨셉에 관한 기사도 참고해 주시면 감사하겠습니다.

내 질문에 대한 자세한 내용은

1개의 예산에 복수의 예산 카테고리를 설정할 수 있는 다음 모델이 있습니다.

state.budgets = {
  1: {
    month: 'October',
    budgetCategories: {
      1: {
        id: 1,
        name: 'Grocery',
        budgeted: 350
      },
      2: {
        id: 2,
        name: 'Rent',
        budgeted: 1000
      },
      3: {
        id: 3,
        name: 'Utilities',
        budgeted: 150
      }
    },
    2: {
      month: 'November',
      budgetCategories: {
        1: {
          id: 1,
          name: 'Grocery',
          budgeted: 350
        },
        2: {
          id: 2,
          name: 'Rent',
          budgeted: 1000
        },
        3: {
          id: 3,
          name: 'Entertainment',
          budgeted: 100
        },
        4: {
          id: 4,
          name: 'Tuition',
          budgeted: 15000
        }
      }
    },
    ...
  }
}

특정 예산 카테고리를 다음과 같이 한 달 동안 업데이트해야 한다고 가정합니다.예산[타깃.키]예산 카테고리[target.categoryId]예산 = 200

여기에는 다음 두 가지 방법이 있습니다.

1. api와 뮤테이터를 호출하기 전에 먼저 모델을 자세히 복사하십시오.

// mutation.js

UPDATE_BUDGET_CATEGORY(state, payload) {
    state.budgets[payload.budget.id].budgetCategories[payload.budgetCategory.id] = payload.budgetCategory
}

// action.js
export const updateBudgetCategory = ({
  commit,
  dispatch,
  getters
}, data) {
  // deep copy the model
  let budget = { ...getters.getBudgetById(data.budget.id)
  }
  const newBudget = data.budgetCategory.budgeted
  const oldBudget = budget.budgetCategories[data.budgetCategory.id].budgeted

  if (oldBudget !== newBudget) {
    // update the model
    budget.budgetCategories[data.budgetCategory.id].budgeted = newBudget

    // api call to save the updated model
    return api.updateBudget(budget).then(
      response => {
        // commit to store state
        commit('UPDATE_BUDGET_CATEGORY', data)
      },
      error => {
        // don't commit
        console.log(error.message)
      }
    )
  }
}

찬성: 이것이 올바른 순서입니다.스토어 상태의 데이터는 데이터베이스의 데이터와 일치합니다.

단점: 개체를 업데이트할 때마다 모델을 자세히 복사해야 합니다.또한 딥 클론 모델을 갱신하기 위한 코드는 기본적으로 뮤테이터와 동일하다.확실히 장황하고 건조하지 않은 것 같아.

2. 먼저 데이터 변경을 커밋한 후 모델을 상태에서 가져와 데이터베이스에 커밋합니다.

// action.js
export const updateBudgetCategory = ({
  commit,
  dispatch,
  getters
}, data) {
  // deep copy the model
  const newBudget = data.budgetCategory.budgeted
  const oldBudget = getters.getBudgetById(data.budget.id).budgetCategories[data.budgetCategory.id].budgeted

  if (!oldBudget !== newBudget) {
    commit('UPDATE_BUDGET_CATEGORY', data)
    //api call to save the updated model from the state
    return api.updateBudget(getters.getBudgetById(data.budget.id))

  }
}

장점: 코드는 건조하고 깨끗합니다.변이자에게 무슨 일이 일어났는지 알려주면 상태를 갱신할 수 있어

단점: API 호출이 실패했을 경우 어떻게 해야 합니까?Vuex에 기본 제공 되돌리기 커밋이 있습니까?

갱신하고 있는 상태가 비동기 콜의 결과에 의존하고 있는 경우는, 당연히 콜이 종료해, 그 결과를 커밋 할 때까지 기다릴 필요가 있습니다.

비동기 콜 결과와 관련이 없는 경우 즉시 커밋할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47119886/vuex-commit-state-changes-before-or-after-api-calls