Правильный способ кеширования данных в vuex

Question

Я пытаюсь асинхронно загрузить данные в vuex, который является статическим, но используется несколькими маршрутами. Я хочу получить данные только один раз и только тогда, когда маршрут, который нуждается в этом, посещается.Это то, чем я сейчас занимаюсь, но я не уверен, правильное ли это соглашение или есть ли лучший / более вуэйский способ.

// 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>

Answer 1

Существует правильный способ делать то, что вы хотите, но это не так, как вы это делаете.Vue довольно строг в отношении «Не изменяйте состояние хранилища vuex вне обработчиков мутаций».

Это означает, что вы должны изменять состояние хранилища только посредством мутации, а затем использовать ваш метод получения только для получения данных.Вы также должны использовать действие для фиксации мутации.Поэтому для того, что вы пытаетесь сделать, вы должны попробовать это следующим образом.

// 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)
        })
      }
    }
  }
});

Вы должны прочитать в документах который охватывает все это очень хорошо.