vue.js - 在多个同级组件中使用一个 vuex 模块存储

Question

我有一个带有一些模块的全局状态。

现在我的页面的各个部分都有了 vue 组件。

我已完成所有设置，因此 /foo 使用 foo 存储(这有效)。 created 方法从 API 加载数据并将其写入存储

现在我有 /foo/bar 作为另一个(同级)组件，但它需要访问与 /foo 相同的存储，但我无法获取它去工作。

如果我在 URL 中输入 /foo/bar/，则商店中没有任何内容。 但如果我切换到 /foo，然后返回 /foo/bar，数据就在存储中并正确输出

我尝试将 /foo/bar 注册为子项，这似乎没有效果(实际上它并不是真正的子项，而只是具有相同数据的另一个页面..)

我也尝试过

state: {
    ...mapState([
        'foo'
    )]
}

在/foo/bar中，但这似乎也不是正确的方式

最佳实践是什么

1. 在任意一组指定页面上创建时从 API 加载数据
2. 访问任何这些页面上的所述数据(即共享同一商店)

我一整天都在尝试寻找解决方案，但似乎我不明白一些事情。

感谢您的帮助:)

编辑

实际上，当我再次阅读我的问题时，我认为我的整个问题是数据未加载(因为 created 方法未被调用)。我怎样才能确保这种情况发生在使用商店的任何页面上并且只发生一次？我不能只在每个 created 方法中编写一个 api 调用，可以吗？

Answer 1

嗯，我认为只是总结一下您的问题可以被称为您无法在两个不同组件之间访问相同的状态。

我通常所做的是从 beforeMount 方法内的一个组件进行 API 调用，这将保证一旦创建我的组件，数据就可供使用。

此外，在调用 api 后，我会更新我的状态，以便之后我可以从任何地方调用它。

您必须注意的一件事是首先加载哪个组件？

如果 A 是 B 的父级，那么您应该在 A 中加载数据。 但是，如果 A 和 B 是兄弟，那么您应该在它们两个内部加载数据，因为您可以先访问组件 A 或 B，然后您不知道数据何时可用。在这种情况下，我将在两个组件中加载数据。 另外，向您的服务器添加缓存，这样您就不需要再次加载相同的数据。

例如:

状态

{
  data: {}
}

组件A

export default {
  name: 'Batch',
  beforeMount() {
    this.getDataFromAPI();
  },
  methods: {
    // getDataFromAPI will store its return inside data with a mutation
    ...mapActions(['getDataFromAPI']),
    randomMethod() {
      // Now I can Use my state
      const data = this.$store.state.data;
    }
  }
};

组件B

export default {
  name: 'Batch',
  methods: {
    randomMethodB() {
      // If component A was loaded first than component B and A is B's parent, then the state will be accessible in the same manner and it should be populated
      const data = this.$store.state.data;
    }
  }
};

行动

const getDataFromAPI = ({ commit }) => new Promise((resolve, reject) => { 

  // Call server
  const data = await callServer();
  commit('updateMyStateWithData');
  resolve(data);

});

export default {
  getDataFromAPI
}

突变

const mutations = {
  updateMyStateWithData(state, newData) {
    state.data = newData;
  }
}

export default mutations;

我做的另一件事是定义 getter，这种方式是加载一次数据的好方法，并且在 getter 内更新数据以仅返回 UI 需要的内容。

希望对你有帮助!