javascript - 使用 Mixins 在 API 调用中的所有 Vue.js 组件中使用常量数据

Question

我有一个 Mixins，它从 sessionStorage 获取数据，并且该数据在所有组件中使用，并且用于获取数据的 API 调用位于主组件(App.vue)中，该组件获取数据并将其设置到 sessionStorage 中。

  beforeCreate() {
    if (!sessionStorage.getItem('constants')) {
       axios.get('/data').then(function(response) {
            sessionStorage.setItem('constants',JSON.stringify(response.data.result));
      });
   },

在 Mixins 中，我没有从 sessionStorage 获取数据，因为 Mixins 在 App.vue 组件之前运行，而这不起作用。

我还尝试将 fetch 调用保留在 Mixins 中，但是，尽管我在从 sessionStorag 获取数据时遇到了这种情况，但 fetch 调用会进行多次。

import Vue from 'vue';

const Constants = Vue.mixin({
  data() {
    const constant = JSON.parse(sessionStorage.getItem('constants'));
    return {
      get constantsData() {
        return {
          COUNTRY: constant.COUNTRY,
          STATE: constant.STATE,
        };
      },
    };
  },
});
export default Constants;

将 Mixins 与 API 数据结合使用的最佳方式是什么？ ？

Answer 1

你可以做到

   beforeCreate() {
        if (!sessionStorage.getItem('constants')) {
           axios.get('/data').then(function(response) {
                sessionStorage.setItem('constants',JSON.stringify(response.data.result));
                this.constant = response.data.result;
          });
       }

在混入中:

    import Vue from 'vue';

    const Constants = Vue.mixin({
      data() {
        return {
          constant: {}
        }
      },
    });

   export default Constants;

但通常我更喜欢使用 vuex在组件之间共享数据。