现在的位置: 首页 > 综合 > 正文

vuex是什么?vue怎么读取api

2020年01月06日 综合 ⁄ 共 1162字 ⁄ 字号 评论关闭

  Vuex是一个用来管理组件之间通信的插件,它是一个专为vue.js应用程序开发的状态管理模式,它解决了组件之间同一状态的共享问题,它能够更好地在组件外部管理状态

  Vuex是一个专为 Vue.js 应用程序开发的状态管理模式,接下来将在文章中为大家详细介绍vuex,具有一定的参考作用,希望对大家有所帮助

  什么是Vuex?

  Vuex是一个专为vue.js应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题。因为它采用的是集中式存储管理应用的所有组件状态,所以组件就可以和store通讯了。其实Vuex就是用来管理组件之间通信的一个插件

  为什么需要Vuex?

  当多个组件依赖于同一个状态时,由于多层嵌套使得传参的方法变得复杂,另外如果使用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,会使得该模式变得脆弱,从而无法维护代码。从而需要使用Vuex来解决这个问题。

  什么情况下使用 Vuex?

  Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

  如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。如果要创建的够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

  使用Vue.js,可以逐步地构建围绕其中一个服务的应用程序,并在几分钟内就可以开始向用户提供内容服务。

  如何利用第三方API提供服务呢?

  我们可以创建ajax请求来处理响应,利用axios来处理API数据。

  Axios是一个基于 Promise 的HTTP客户端,用于创建 Ajax请求,并且非常适合我们的应用。它提供了一些简单而丰富的API。 它与fetchAPI非常相似,但不需要为旧版浏览器额外的添加一个polyfill,另外还有一些很巧妙的地方。

  以前,vue-resource 通常用于Vue项目,但现在已经退休了。

  现在,一旦我们的Vue应用被挂载 - mounted到页面,我们就可以创建home部分获取热点事件列表的请求:

  // ./app.js

  const vm = new Vue({

  el: '#app',

  data: {

  results: []

  },

  mounted() {

  axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")

  .then(response => {this.results = response.data.results})

  }

  });

  记住: 将your_api_key替换为之前获取的实际API密钥。

抱歉!评论已关闭.