programing

매초 같은 액션에 대한 Vuex 커밋이 느리다

sourcetip 2022. 7. 12. 00:10
반응형

매초 같은 액션에 대한 Vuex 커밋이 느리다

Vue.js v2.5.17에서 Vuex V3.0.1을 사용하고 있다.

vuex의 동일한 작업 커밋은 정확히 매초 느립니다.컴포넌트 내부에 동일한 Axios 요청을 넣고 컴포넌트 내부에서 호출하면 항상 16~22ms 사이입니다.하지만 매장에 디스패치 할 때 1초마다 300ms가 넘습니다.

Chrome 네트워크 트래픽

this.$store.dispatch('getQueryData', {QueryId: this.to.QueryId, params: data, CacheResults : this.to.CacheResults }).then(response => {
    this.options = response.data
        var arr = response.data
        var defaultValue = this.model[this.field.key] || this.field.defaultValue || null
        var valueprop = this.to.valueProp
        var model = {}
        if (defaultValue !== null)
        {
          this.options.forEach(function(value){
              if (value[valueprop] == defaultValue){
                model = value
              }
          })
          this.model[this.field.key] = model
        }
}, error => {
   this.$store.commit('setError', error.response)
   this.options = [];
})

그리고 저희 가게에서는

getQueryData ({commit}, payload) {
  const QueryIdStr = String(payload.QueryId)

  if (store.state.queries[QueryIdStr]) {
    var promise = Promise.resolve({data: store.state.queries[QueryIdStr]})
    return promise
  } else {
    return new Promise((resolve, reject) => {
      axios
        .get('/scadservices/api/tablesv2/Query/' + payload.QueryId + '/data.json', {crossdomain: true, withCredentials: true, params: payload.params})
        .then(response => {
          var output = {
            QueryId: payload.QueryId,
            data: response.data
          }
          if (payload.CacheResults)
          {
            commit('setQueryData', output)
          }
          resolve(response)
        }, error => {
          commit('setError', error.response)
          reject(error)
        })
    })
  }
},

그리고 내 돌연변이는

setQueryData: (state, payload) => {
  const QueryIdStr = String(payload.QueryId)
  Vue.set(state.queries, QueryIdStr, payload.data)
}

언급URL : https://stackoverflow.com/questions/52715729/every-second-vuex-commit-to-the-same-action-is-slow

반응형