구성 요소의 vuex 작업에서 상태 데이터를 반환하는 방법

구성 요소의 vuex 작업에서 상태 데이터를 반환하는 방법

데이터베이스에서 데이터를 가져오는 작업이 있습니다. vuex 스토어의 상태에 있는 다양한 개체/변수에 요청 응답을 할당하면 이 작업이 app.js로 디스패치됩니다.

그 코드는 이렇게 생겼습니다.

// Store.js

actions:{
  getData(context){
    axios.get('/getData').then(function(res){
      context.state.var = res.data.SomeArray.var;
      context.state.var2 = res.data.SomeArray.var2;
    });
  }
}

작업 및 로그를 디스패치하여 상태 및 상태 데이터를 콘솔합니다.

//app.displays

const app = new Vue({
  el: '#app',
  store: store,
  async created() {
    await this.$store.dispatch('getData')
    console.log(this.$store.state)
    console.log(this.$store.state.var)
  }
});

주(州)를 인쇄하면console.log(this.$store.state)그리고.console.log(this.$store.state.var)적절한 값을 가진 올바른 개체가 기록됩니다.그런 다음 상태 데이터를 다양한 컴포넌트에 제안합니다.

문제는 실제 컴포넌트의 상태에서 개별 오브젝트/변수에 액세스하려고 할 때,console.log(this.$store.state.var)또는 심지어console.log(store.state.var)정의되지 않은 데이터 또는 다음과 같은 이상한 데이터가 표시됩니다.

전체 개체로서 상태가 확실히 채워지고 올바른 데이터이지만 상태를 구성하는 개별 개체에는 잘못된 형식이 있기 때문에 이것은 말이 되지 않습니다.

데이터를 잘못 참조하고 있습니까?파일의 상태를 Import 할 필요가 있습니까?

액션을 사용하여 상태를 변환하고 있는 것이 실수입니다.상태 변환은 다음 방법만 사용해야 합니다.mutations.

Vuex 문서에 따르면

Vuex 스토어에서 실제로 상태를 변경하는 유일한 방법은 변환을 커밋하는 것입니다.

다음은 그 방법의 예입니다.

const store = new Vuex.Store({
  state: {
    var: {},
    var2: {},
  },
  mutations: {
    setVariables (state, payload) {
      // mutate state
      state.var = payload.var;
      state.var2 = payload.var2;
    }
  }
   actions:{
     getData(context){
      axios.get('/getData').then(function(res){
        context.commit('setVariables', res.data.SomeArray)
      });
     }
   }
})

console.log 관련 문제에 대해서는Object.freeze()데이터 개체를 생성할 때 사용합니다.

Vue 인스턴스가 생성되면 해당 데이터 개체에 있는 모든 속성이 Vue의 반응성 시스템에 추가됩니다.이러한 속성 값이 변경되면 보기가 "반응"하여 새 값과 일치하도록 업데이트됩니다.

유일한 예외는 오브젝트를 사용하는 것입니다.freeze(프리즈)는 기존 특성이 변경되는 것을 방지합니다. 즉, 반응도 시스템은 변경을 추적할 수 없습니다.

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

언급URL : https://stackoverflow.com/questions/63526599/how-to-return-state-data-from-vuex-action-in-components