Блог

В представлении истории я извлекаю историю с внутреннего сервера, вызывая действие Vuex created() , и передаю данные в таблицу истории с помощью вычисляемой функции, history() которая обращается к состоянию модуля истории.

Проблема в том, что каждый раз, когда я возвращаюсь к просмотру истории, новые запросы к серверу выполняются из-за вызова действия created() .

Как я могу настроить так, чтобы вызов выполнялся при первом доступе к представлению, и полагаться на состояние истории для последующих посещений этого представления?

История.vue

 <script>
import { mapActions } from "vuex";
export default {
  name: "History",
  data() {
    return {
        // data
    };
  },
  methods: {
    ...mapActions(["fetchHistory"]),
    refresh() {
        this.fetchHistory() 
  },
  computed: {
    history() {
      return this.$store.state.history.records;
    },
  },
  created() {
    this.refresh();
  },
};
</script>
 

historyModule.js

 async fetchHistory({commit}){
    await axios.get('api/history')
        .then((response) => {
            commit('setHistory', response.data)
            return Promise.resolve();
        })
        .catch((error) => {
            commit('setHistory', [])
            return Promise.reject(error)
        })
}
 

Если history.records это массив, вы можете проверить длину перед отправкой действий:

 created() {
  if(!this.$store.state.history.records.length) this.refresh();
},
 

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