vuex에서 데이터를 캐시하는 올바른 방법

vuex에서 데이터를 캐시하는 올바른 방법

여러 경로에서 사용되는 정적 vuex에 데이터를 비동기적으로 로드하려고 합니다.데이터를 한 번만 가져오고 필요한 경로가 방문되었을 때만 데이터를 가져옵니다.이것이 제가 현재 하고 있는 일입니다만, 이것이 올바른 규칙인지, 아니면 더 나은/더 많은 Vueish 방법이 있는지 잘 모르겠습니다.

// store.js

export default new Vuex.Store({
  state: {
    _myData: null,
  },
  getters: {
    myData: (state) => new Promise((resolve,reject) => {
      if(state._myData){
        resolve(state._myData);
      } else {
        axios.get('http://myData.com/')
        .then(myData => {
          state._myData = myData;
          resolve(state._myData);
        });
      }
    })
  }
});

// ProfilePage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
   this.myData = await this.$store.getters.myData;
  }
}
</script>

// AboutPage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
   this.myData = await this.$store.getters.myData;
  }
}
</script>

당신이 원하는 것을 할 수 있는 올바른 방법이 있지만 그것은 당신이 하고 있는 방법이 아니다.Vue는 "변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 마십시오"에 매우 엄격합니다.

즉, 변환을 통해 저장 상태를 변경한 다음 데이터를 가져오는 데만 getter를 사용해야 합니다.또한 변환을 커밋하기 위한 액션도 사용해야 합니다.그래서 지금 하려고 하는 건 이렇게 해야 돼요.

// AnyPage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  data() {
    return {
      myData:null
    }
  },
  async created(){
    if(this.$store.state._myData === null) {
      await this.$store.dispatch('getData')
    }
    this.myData = this.$store.getters.myData;
  }
}
</script>

그 후 당신의 스토어에서:

// store.js

export default new Vuex.Store({
  state: {
    _myData: null,
  },
  getters: {
    myData: (state) => state._myData,
  }
  mutations: {
    SET_DATA(state, data) {
      state._myData = data
    }
  }
  actions: {
    getData({ context }){
        axios.get('http://myData.com/')
        .then(res => {
          context.commit('SET_DATA', res)
        })
      }
    }
  }
});

당신은 그것에 대해 꽤 잘 다루고 있는 문서들을 읽어야 합니다.

액션 핸들러는 스토어 인스턴스에서 동일한 메서드/속성 세트를 공개하는 컨텍스트개체를 수신하므로 context.commit을 호출하여 변환을 커밋하거나 context.state 및 context.getters를 통해 상태와 getter에 액세스할 수 있습니다.https://vuex.vuejs.org/guide/actions.html

이것을 시험해 보세요.

// AnyPage.vue

<template>
 <div>{{myData}}</div>
</template>

<script>
export default {
  computed: {
    myData () {
      return this.$store.state.myData
    }
  },
  mounted () {
    this.$store.dispatch('getData')
  }
}
</script>

저장 파일:

// store.js

export default new Vuex.Store({
  state: {
    myData: null,
  },
  mutations: {
    SET_DATA(state, data) {
      state.myData = data
    }
  }
  actions: {
    getData({ context }){
        if (context.state.myData === null) {
            axios.get('http://myData.com/')
            .then(res => {
                context.commit('SET_DATA', res)
            })
        }
      }
    }
  }
});

언급URL : https://stackoverflow.com/questions/55072840/correct-way-to-cache-data-in-vuex