Vue 상태 데이터를 데이터베이스에 바인딩하는 '적절한' 방법은 무엇입니까?

Vue 상태 데이터를 데이터베이스에 바인딩하는 '적절한' 방법은 무엇입니까?

현재 사용자가 데이터를 편집하는 액션을 일으키면 API 콜오프를 보낸 후 데이터베이스에서 모든 관련 데이터를 다시 다운로드하는 '새로 고침' 명령을 앱에 효과적으로 실행하면 뷰가 업데이트됩니다.

대신 Vuex 상태의 데이터를 직접 편집하고 이러한 변경 사항을 관찰하여 DB에 다시 쓰는 일종의 감시 기능을 사용해야 합니까?

Vuex에서 직접 데이터를 편집하는 것부터 시작하지 않습니다.데이터베이스의 현재 상태를 정확하게 나타내지 못할 수 있기 때문에 매우 곤란해질 수 있습니다.

대신, 나는 당신의 데이터베이스에 필요한 업데이트를 하는 Promise를 반환하는 API 모듈을 당신의 앱에 만들 것입니다.그런 다음 데이터베이스 API에서 나오는 성공/오류 응답에 따라 Promise를 해결/거부합니다.성공하면 해결 콜백은 업데이트된 데이터를 전달할 수 있습니다.

따라서 편집 시 vue API가 호출되어 요청과 데이터가 데이터베이스 끝점으로 전송됩니다.vue API는 약속을 반환하고 체인으로 Vuex 상태를 업데이트합니다.성공 시 업데이트된 데이터를 포함하는 개체를 수신하고 오류 시 메시지를 수신하고 필요한 경우 사용자에게 경고합니다.

# Your Vue API
setUserName: (username) => new Promise((resolve, reject) => {

  // send request to your database, assuming via vue resource
  Vue.http.post('www.endpoint.com', { name: username })
    .then(responseData => resolve(responseData.name))
    .catch(errorData => reject(errorData))

}

# Your Vuex Action
updateUserName: ({ commit }) => {

  YourVueAPI.setUserName('joe')
    .then(name => commit('SET_USERNAME', name))
    .catch(errorData => alert(errorData.message))

}

# Your Vuex Mutation
SET_USERNAME: (state, name) {

  state.username = name

}

위와 같은 기능을 사용하면 갱신된 사용자 이름을 데이터베이스 내에서 올바르게 설정한 경우에만 표시할 수 있습니다.따라서 사용자는 항상 DB의 올바른 상태를 인식해야 합니다.

그러면 Vue는 Vuex 상태를 쉽게 반응/감시하여 페이지를 업데이트할 수 있습니다.

작업이 비동기적이기 때문에 상태 변경을 트리거하고 데이터베이스에 백그라운드에서 저장하는 vuex 작업을 구현할 수 있습니다.

언급URL : https://stackoverflow.com/questions/40654652/whats-the-proper-way-to-bind-vue-state-data-to-a-database