Vue应用程序中实现AJAX的四个地方-Vue.js-PHP中文网

首页

web前端

Vue.js

Vue应用程序中实现AJAX的四个地方

PHPz

Sep 25, 2020 pm 04:07 PM

ajaxvue.js

Vue应用程序中实现AJAX的四个地方

Vue没有提供实现AJAX的正式方法，而且有许多不同的设计模式可以有效地使用。每种方法都有其优缺点，应该根据需求进行判断。您甚至可以同时使用多个!

在本文中，我将向您展示在Vue应用程序中实现AJAX的四个地方:

根实例
组件
Vuex行动
路线导航警卫

我将解释每种方法，给出一个例子，并讨论其优缺点。

1、根实例

使用这种体系结构，您可以从根实例发出所有AJAX请求，并将所有状态存储在根实例中。如果任何子组件需要数据，它将作为辅助。如果子组件需要刷新数据，将使用自定义事件提示根实例请求它。

例子:

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

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

优点：

将所有AJAX逻辑和数据保存在一个地方。
保持组件“dumb”，这样它们就可以专注于表示。

缺点：

随着应用程序的扩展，需要大量的道具和定制事件。

2、组件

使用这种体系结构，组件负责独立地管理它们自己的AJAX请求和状态。在实践中，您可能希望创建几个“容器”组件，这些组件为它们自己的本地“表示”组件组管理数据。

例如，filter-list可能是包装filter-input和filter-reset的容器组件，它们充当表示组件。filter-list将包含AJAX逻辑，并将管理该组中所有组件的数据，通过道具和事件进行通信。

为了使这个体系结构的实现更容易，您可以将任何AJAX逻辑抽象到mixin中，然后使用组件中的mixin使其启用AJAX。

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

Vue.component(&#39;container-comp&#39;, {
  // 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; ]
})

优点：

保持组件分离和可重用。
获取所需数据的时间和地点。

缺点：

不容易与其他组件或组件组通信数据。
组件可能会有太多的职责和重复的功能。

3、Vuex行动

使用这种体系结构，您可以在Vuex存储中管理状态逻辑和AJAX逻辑。组件可以通过分派操作请求新数据。

如果您实现了这种模式，那么最好在操作中返回一个promise，这样您就可以对AJAX请求的解析做出响应，例如隐藏加载微调器、重新启用按钮等。

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

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

我喜欢这种架构，因为它很好地解耦了状态和表示逻辑。如果你正在使用Vuex，这是一个方法。如果你不使用Vuex，这可能是一个足够好的理由。

优点：

根组件体系结构的所有优点，不需要道具和自定义事件。

缺点：

增加了Vuex的开销

4、路线导航警卫

使用这种架构，您的应用程序将被分割为多个页面，当路由更改时，将获取页面及其子组件所需的所有数据。

这种方法的主要优点是它确实简化了UI。如果组件独立地获取它们自己的数据，当组件数据以任意顺序填充时，页面将不可预测地重新呈现。

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

import axios from &#39;axios&#39;;

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视频教程精选

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

以上是Vue应用程序中实现AJAX的四个地方的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：vuejsdevelopers。如有侵权，请联系admin@php.cn删除

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。

vue.js在前端的力量：关键特征和好处Apr 21, 2025 am 12:07 AM

Vue.js是一个渐进式的JavaScript框架，适用于构建高效、可维护的前端应用。其关键特性包括：1.响应式数据绑定，2.组件化开发，3.虚拟DOM。通过这些特性，Vue.js简化了开发过程，提高了应用性能和可维护性，使其在现代Web开发中备受欢迎。

vue.js比反应好吗？Apr 20, 2025 am 12:05 AM

Vue.js和React各有优劣，选择取决于项目需求和团队情况。1)Vue.js适合小型项目和初学者，因其简洁和易上手；2)React适用于大型项目和复杂UI，因其丰富的生态系统和组件化设计。

vue.js的功能：增强前端的用户体验Apr 19, 2025 am 12:13 AM

Vue.js通过多种功能提升用户体验：1.响应式系统实现数据即时反馈；2.组件化开发提高代码复用性；3.VueRouter提供平滑导航；4.动态数据绑定和过渡动画增强交互效果；5.错误处理机制确保用户反馈；6.性能优化和最佳实践提升应用性能。

vue.js：定义其在网络开发中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web开发中的角色是作为一个渐进式JavaScript框架，简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发，使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM，优化性能。3)实际项目中，使用Vuex管理全局状态和优化数据响应性是常见实践。

了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。

Netflix的前端：React（或VUE）的示例和应用Apr 16, 2025 am 12:08 AM

Netflix使用React作为其前端框架。1)React的组件化开发模式和强大生态系统是Netflix选择它的主要原因。2)通过组件化，Netflix将复杂界面拆分成可管理的小块，如视频播放器、推荐列表和用户评论。3)React的虚拟DOM和组件生命周期优化了渲染效率和用户交互管理。

前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

See all articles