Question

如果我有两个共享相同数据的兄弟组件并且不是数据已经持久保存到Vuex（例如直接加载到api/v1/calendars/:id的页面上，在两个组件中都需要对该资源进行调用吗？我已阅读以下内容：

Vue组件应尽可能独立并且隔离可能

如果是这样，则从两个组件中的Vuex请求数据是正确的，但是如果{{1}中尚不可用，则该应用程序将只需要进行两个网络调用。 }}。

理想情况下，我想对所需资源进行一次网络调用，然后该页面上的多个组件都共享Vuex中的数据。

我将在两个组件（特别是Vuex方法）中复制此代码。

created()

Answer 1

最简单的方法是使您的组件不必（明确地）关心是否已获取日历。

简单地告诉商店进行提取，但是该操作将决定是否确实需要这样做。

Vuex应该是单向数据流，因此状态信息不会从操作返回到组件，而是组件始终只是在等待数据到达。

要使事物具有反应性，请结合使用computed和getter。

组件

created() {
  /* tell the store 'this is what I need' */
  store.dispatch('calendar/getCalendars');
},
...
computed: {
  calendar() {
    /* reactive - initially null, then gets a value when the store is updated */
    return this.$store.getters['calendar/calendarById'](this.$route.params.id)
  },
},

商店

getters: {
  calendarById: (state) => {
    /* return a function so that param can be passed from component */
    return (id) => state.calendars ? state.calendars.find(c => c.id === id) : null;
  },
}

actions: {
  getCalendars (store) {
    /* only perform the fetch if the store does not already contain the data */
    if (!store.state.calendars) {
      fetch(calendarsUrl).then(res => store.commit('setCalendars', res); // e.g
    }
  },
}

如果数据尚未持久存储到Vuex，则在同级组件之间共享数据吗？

1 个答案: