Vuex中如何按需加载后端全局数据以提高性能？-html教程-PHP中文网

Vuex中如何按需加载后端全局数据以提高性能？

聖光之護

发布： 2025-02-23 10:00:33

原创

1036人浏览过

Vuex中如何按需加载后端全局数据以提高性能？

优化vuex：按需加载后端全局数据

为了提升应用性能，建议采用按需加载的方式获取并存储后端全局数据到Vuex中。以下步骤将指导您如何实现：

高效加载策略

初始空状态：在Vuex状态中，预先定义一个空数组或对象用于存储全局数据。
触发加载动作：当需要使用全局数据时，在组件中调用相应的Vuex action，例如loadData。
Action中的条件判断：在loadData action中，检查Vuex状态中数据是否存在。如果已存在，则直接返回；如果不存在，则发起API请求获取数据。
更新Vuex状态：API请求成功后，使用mutation更新Vuex状态，将获取到的数据存储进去。

代码示例

以下代码演示了按需加载的具体实现：

立即学习“前端免费学习笔记（深入）”；

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

store.js:

<code class="javascript">export default {
  namespaced: true,
  state: {
    globalData: []
  },
  mutations: {
    SET_GLOBAL_DATA(state, data) {
      state.globalData = data;
    }
  },
  actions: {
    loadData({ commit, state }) {
      if (state.globalData.length > 0) return Promise.resolve(); // 数据已存在，直接返回resolved promise

      return api.get('api/global-data').then(({ data }) => {
        commit('SET_GLOBAL_DATA', data);
      });
    }
  }
};</code>

登录后复制

component.vue:

<code class="vue"><template>
  <div>{{ globalData }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      globalData: state => state.globalModule.globalData
    })
  },
  mounted() {
    this.$store.dispatch('globalModule/loadData').then(() => {
      // 数据加载完成后执行的操作
      console.log('Global data loaded!');
    });
  }
};
</script></code>

登录后复制

优势总结