Question

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

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

我已完成所有设置，因此/foo使用foo商店（此作品）。 created方法从API加载数据并将其写入商店

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

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

我已经尝试将/foo/bar注册为一个孩子，这似乎没有效果（实际上它不是一个孩子，而只是另一个具有相同数据的页面。）

我也试过

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

<{1>}中的

，但这似乎也不是正确的方式

的最佳做法是什么？

在/foo/bar上的任何指定页面上加载来自API的数据
访问任何这些页面上的所述数据（即共享同一商店）

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

感谢您的帮助：）

修改

实际上，当我再次阅读我的问题时，我认为我的整个问题是没有加载数据（因为没有调用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中你更新数据只返回你需要的东西。

我希望它有所帮助！

在多个兄弟组件

修改

1 个答案: