Four places to implement AJAX in Vue applications

Vue provides no formal way to implement AJAX, and there are many different design patterns that can be used effectively. Each method has its pros and cons and should be judged based on your needs. You can even use multiple at the same time!

In this article, I will show you four places to implement AJAX in a Vue application:

• Root Instance

• Components

• Vuex Action

• Route Navigation Guard

I will explain each method, give an example, and discuss its pros and cons.

1. Root instance

With this architecture, you can make all AJAX requests from the root instance, and stores all state in the root instance. It will act as a helper if any child component needs data. If a child component needs to refresh data, the root instance will be prompted to request it using a custom event.

Example:

new Vue({
  data: {
    message: ''
  },
  methods: {
    refreshMessage(resource) {
      this.$http.get('/message').then((response) {
        this.message = response.data.message;
      });
    }
  }
})

Vue.component('sub-component', {
  template: &#39;<div>{{ message }}</div>&#39;,
  props: [ &#39;message&#39; ]
  methods: {
    refreshMessage() {
      this.$emit(&#39;refreshMessage&#39;);
    }
  }
});

Advantages:

• Keep all your AJAX logic and data in one place.

• Keep components "dumb" so they can focus on presentation.

Disadvantages:

• As the application expands, a large number of props and custom events are required.

2. Components

Using this architecture, components are managed independently Their own AJAX requests and status. In practice, you might want to create several "container" components that manage data for their own local "presentation" component groups.

For example, filter-list might be a container component wrapping filter-input and filter-reset, which act as presentation components . The filter-list will contain the AJAX logic and will manage the data for all components in the group, communicating through props and events.

To make the implementation of this architecture easier, you can abstract any AJAX logic into a mixin and then use the mixin in the component to make it AJAX-enabled.

let mixin = {
  methods: {
    callAJAX(resource) {
      ...
    }
  }
}

Vue.component('container-comp', {
  // No meaningful template, I just manage data for my children
  template: &#39;<div><presentation-comp :mydata="mydata"></presentation-comp></div>&#39;, 
  mixins: [ myMixin ],
  data() {
    return { ... }
  },

})

Vue.component(&#39;presentation-comp&#39;, {
  template: <div>I just show stuff like {{ mydata }}</div>,
  props: [ &#39;mydata&#39; ]
})

Advantages:

• Keep components Decoupled and reusable.

• When and where to get the data you need.

Disadvantages:

• Not easy to communicate data with other components or component groups.
  

• Components may have too many responsibilities and duplicate functionality.

3. Vuex Action

Using this architecture, you can Manage state logic and AJAX logic in storage. Components can request new data through dispatch operations.

If you implement this pattern, it is best to return a promise in the operation so that you can Parse and respond to AJAX requests, such as hiding loading spinners, re-enabling buttons, etc.

store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  },
  actions: {
    refreshMessage(context) {
      return new Promise((resolve) => {
        this.$http.get('...').then((response) => {
          context.commit('updateMessage', response.data.message);
          resolve();
        });
      });
    }
  }
});

Vue.component('my-component', {
  template: &#39;<div>{{ message }}</div>&#39;,
  methods: {
    refreshMessage() {
      this.$store.dispatch(&#39;refeshMessage&#39;).then(() => {
        // do stuff
      });
    }
  },
  computed: {
    message: { return this.$store.state.message; }
  }
});

I like this architecture because it decouples state and presentation logic very well. If you're using Vuex, here's one way to do it. If you don't use Vuex, this is probably a good enough reason.

Advantages:

• All of the root component architecture Advantages, no props or custom events required.

Disadvantages:

• Increased Vuex overhead

4. Route Navigation Guard

With this architecture, your application will be split into multiple pages. When the route changes, will get all the data needed for the page and its subcomponents.

The main advantage of this approach is that it really simplifies the UI. If components obtain their own data independently, the page will re-render unpredictably when component data is populated in an arbitrary order.

实现此功能的一个简单方法是在服务器上为每个页面创建端点，例如/about、/contact等，这些端点与应用程序中的路由名匹配。然后，可以实现一个通用的beforeRouteEnter钩子，将所有数据属性合并到页面组件的数据中:

import axios from 'axios';

router.beforeRouteEnter((to, from, next) => {
  axios.get(`/api${to.path}`).then(({ data }) => {
    next(vm => Object.assign(vm.$data, data))
  });
})

优点：

• 使UI更加可预测。

缺点：

• 整体上比较慢，因为页面在所有数据都准备好之前无法呈现。

• 如果您不使用路由，也没有多大帮助。

附加模式:服务器—在页面中呈现第一个AJAX调用

不建议在初始页面加载时使用AJAX检索应用程序状态，因为它需要额外的到服务器的往返，这会延迟应用程序的呈现。

相反，将初始应用程序状态注入HTML页面头部的内联脚本中，以便在需要时将其作为全局变量提供给应用程序。

<html>
...
<head>
  ...
  <script type="text/javascript">
   window.__INITIAL_STATE__ = &#39;{ "data": [ ... ] }&#39;;
  </script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后，AJAX可以更恰当地用于后续数据获取。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Four places to implement AJAX in Vue applications. For more information, please follow other related articles on the PHP Chinese website!