2

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

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

我有一切设置，所以/foo使用foo商店（这有效）。该created方法从 API 加载数据并将其写入存储

现在我有/foo/bar另一个（兄弟）组件，但它需要访问与 相同的商店/foo，但我无法让它工作。

如果我输入/foo/bar/URL，商店里什么都没有。但是如果我切换到/foo，然后再返回/foo/bar，数据就在存储中并且可以正确输出

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

我也试过

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

in /foo/bar，但这似乎也不是正确的方法

什么是最佳做法

  1. created在任何指定页面集上从 API 加载数据
  2. 在任何这些页面上访问所述数据（即共享同一个商店）

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

感谢您的帮助 ：）

编辑

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

4

1 回答 1

2

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

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

此外，在调用 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 需要的内容。

我希望它有所帮助！

于 2018-03-29T19:05:44.023 回答