Vuex + Vue 从服务器拉取状态一次答案

【问题标题】：Vuex + Vue pull state from server just onceVuex + Vue 从服务器拉取状态一次
【发布时间】：2021-10-08 17:29:47
【问题描述】：

在 History 视图中，我通过调用 created() 中的 Vuex 操作从后端服务器下拉历史记录，并使用访问历史模块状态的计算函数 history() 将数据传递到历史记录表。

问题是，每次我返回 History 视图时，由于调用 created() 中的操作，会向服务器发出一个新请求。

如何设置以便在第一次访问视图时进行调用，并依赖历史状态来后续访问此视图？

History.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)
        })
}

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

如果history.records 是数组，您可以在调度操作之前检查长度：

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

如果您希望这种模式跨组件工作，您可以将相同的行为添加到 Vuex 操作而不是创建的钩子中。这也会将您的所有 Vuex 行为保留在您的商店代码中。

【讨论】：