首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我应该在Vuex操作上使用vue-resource吗

在Vuex操作上,不建议使用vue-resource。vue-resource是Vue.js 1.x版本中的官方插件,用于处理HTTP请求。然而,自Vue.js 2.x版本起,官方推荐使用axios作为HTTP客户端库,因为axios具有更好的维护和更广泛的社区支持。

在Vuex中,主要用于管理应用程序的状态。它提供了一个集中式的存储库,用于存储和管理应用程序的所有组件的状态。Vuex通过提供一些特定的API来实现状态的更改和访问。

如果你需要在Vuex中进行HTTP请求,可以使用axios来替代vue-resource。axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js中使用。它具有更简洁的API和更好的性能,广泛应用于Vue.js项目中。

以下是使用axios进行HTTP请求的示例:

  1. 首先,安装axios:
代码语言:bash
复制
npm install axios
  1. 在Vuex模块中引入axios:
代码语言:javascript
复制
import axios from 'axios';
  1. 在Vuex操作中使用axios发送HTTP请求:
代码语言:javascript
复制
actions: {
  fetchData({ commit }) {
    axios.get('/api/data')
      .then(response => {
        commit('SET_DATA', response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

在上述示例中,我们使用axios发送了一个GET请求,并在成功获取数据后将其提交到Vuex的mutation中进行状态更新。

总结:在Vuex操作上,推荐使用axios来处理HTTP请求,而不是vue-resource。axios具有更好的维护和更广泛的社区支持,可以更好地满足你的需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue 全家桶、原理及优化简议

vue-resource 网站:https://github.com/pagekit/vue-resource 使用npm来安装Vue-resource: $ npm install vue-resource...使用CDN加速vue类库 一般项目里用到的第三方js库主要有:vue、vue-router、vuexvue-resource、axio、qiniu等。...v-for和v-if不要同时使用 在vue中v-for和v-if不要放在同一个元素使用。由于 v-for 和 v-if 放在同一个元素使用会带来一些性能上的影响,在计算属性上过滤之后再进行遍历。...使用Keep-alive标签优化组件创建 vue提供了keep-alive标签来存储缓存,对于一些视频控件object或图表类的使用,我们经常会使用v-if指令,而v-if是会创建和销毁的,如果频繁操作在...,这里要说的优化点在于减少页面中 dom 总数,比较倾向于使用 v-if,因为减少了 dom 数量,加快首屏渲染,至于性能方面感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。

2K40

【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)

【注意】:mock.js只拦截Ajax,而不是fetch,所以,习惯于使用fetch的API的朋友们要注意了 mock的API其实非常简单,主要要用到的API其实就两个(是说主要哈~~): 1...: 用例如下: [注意] 为了在Vue中使用Ajax,注册了一个插件:Vue-Resource,关于更多可以参考Vue-Resource的官方文档:https://github.com/pagekit...+ mockjs搭建一个简单的文章Feed 下面,将用用Vue + Vuex + mockjs搭建一个简单的应用,展示前后端分离的工作流程 先看看我们最终要达到的效果,这是UI的最小单元:...// 入口文件,初始化vuexvue-resource,并挂载mockjs ├── mock.js           // 生成模拟数据 └── module.js        // vuex...from 'vuex' import VueResource from 'vue-resource'   import App from '.

1.3K120

解决post方法使用applicationx-www-form-urlencoded格式编码数据

main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入 为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex...,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求 之前一直使用的是 vue-resource插件,...在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了; 初用axios时,无脑的按照上面的步骤进行全局引用...解决方法有很多种: 1.结合 vue-axios使用 axios 改写为 Vue 的原型属性 3.结合 Vuex的action 结合 vue-axios使用 vue-axios 用于将axios...console.log(response); }) }, 方法2: axios 改写为 Vue 的原型属性 首先在主入口文件main.js中引用,之后挂在vue的原型链

3K20

Vue.js 实战总结

Vue.js与ReactJS、AngularJS这些框架一样都持有相同的开发理念,通过扩展原生的HTML等结构化标签来作为其模版语言,此外进一步通过语法的扩展提供了诸如双向数据绑定、交互数据模型等概念...,从而使开发者从繁杂的DOM操作中解脱出来,将更多的精力用于关注业务本身的内容。...例如,你可以将有关数据计算的逻辑抽象为独立的插件,提供给团队的人使用等。 state和vuex 如果你的项目非常简介,没有复杂的逻辑,那么你完全没必要引入vuex。...vuex是用来在应用各个组建之间管理和共享应用state的模块,如果你使用过React那么你应该对Flux不陌生,vuex起到的作用与此类似。...其完整的生命周期的方法图示如下: vue-resource 前端开发不可避免的就是前后端交互,这里非常推荐vue-resource

8.2K31

前后端分离实践:基于vue实现网站前台的权限管理

学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering、Component System、Client-side Routing、Vue-resource...、Axios以及视项目大小而决定是否使用Vuex,学习vue事小,主要转变思维,面向前后端分离的组件式web开发才是真正想去实践的。...---- 正好的个人网站CodeSheep最近要开发后台管理,因此正好用vue这一套来实现了一下。说到后台管理,绕不开的问题就是权限的管理。...具体代码如下: ---- 流程图中几个重要步骤解释一下: 判断前端是否取到了token令牌:getToken() 操作很简单,主要是从Cookie中获取,看token是不是已经拿到了: vuex异步操作...store.dispatch(‘GetInfo’):获取用户信息 操作也很简单,用一个get的restful api从服务器获取用户的角色和名字 vuex异步操作store.dispatch(‘GenerateRoutes

1.1K70

使用npm版本锁定的必要性

事情的背景 司的项目基本都是后端java,前端随意。...经过多次测试,发现: 本地是好的,多次构建都是完全一样的,哪怕是删除了package.json、node_modules 而同样的某一台构建服务器却是两次构建不一样,并且两次和我本机的构建hash也不一样...但是会忽略 2.0.0及以上版本 除此之外还有一种匹配模式是波浪号,匹配第二次要的版本 "dependencies": { "vue": "~2.4.2", "vue-resource": "~...这个还真的很有可能,因为我们的构建机器的依赖包是优先缓存的,而之前为了做实验做了清缓存的操作,有可能是有的更新了缓存,有的却没有更新。...总结与分析 很明显,问题就是出在依赖包,因为使用了范版本,不同的机器安装的包是不一样的,那么构建出来的代码(尤其是压缩、babel等语法解析作用的包处理之后的代码)是非常可能不一样的。

1.1K10

在没有DOM操作的日子里,是怎么熬过来的(终结篇)

面色微醺自娇俏”的大佬,然后顺势请教下工作的事情,那么你的Question还是Question?...从上图我们可以看到组件的prop属性、计算属性、vue getter属性等,以及Vuex中的触发的mutation、state 当前的值等我们可能关注的内容都直观地展示了出来。...实际使用 v-on 有几个好处: 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。...说白了,就是变相地抛弃了vue-resource,更恰当的说法是,物竞天择,轻量小巧。为了响应教主的号召,果断入了axios的坑。 问把大象装冰箱,总共分几步?...因此推荐使用原生操作,尽量避免三方库的引用,也能最大化加深基础知识。 还有一点想分享的是,动态模版添加方法。先来看看需求: 服务端返回 '<img src=".."

1K130

MacVue启程

前言 vue.js有著名的全家桶系列,包含了vue-router,vuexvue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。...因为的项目中是有对 axios 进行封装的,而且也不喜欢在 main.js 中来做这个操作,所以我将这个操作移到了 api.js 这个文件的开头。...axios 进行封装的,而且也不喜欢在 main.js 中来做这个操作,所以我将这个操作移到了 api.js 这个文件的开头。.../src/main.js"], }; Vuex Vuex文档 安装 npm install vuex --save 使用 import Vue from 'vue' import Vuex from...,大体总结了四个,也是比较常用的: ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考网站 vue-meta-info,这个是针对单页面的meta

1.8K30

Vue 全家桶介绍

Vue全家桶,包含了vue-router,vuexvue-resource。再加上构建工具vue-cli,sass样式,就是一个完整的vue项目的核心构成。...组件化:把整体拆分为各个可以复用的个体,数据驱动:通过数据变化直接影响bom展示,避免dom操作。...三、vuex vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。vuex主要由五部分组成:state action、mutation、getters、module组成。...使用流程是: 组件中可以直接调用上面四个部分除了module, 1、state 类似vue 对象的data, 用来存放数据以及状态。...2、actions Action 通过 store.dispatch 方法触发:action支持异步调用(可以调用api),mutation只支持操作同步,并且action提交的是 mutation,而不是直接变更状态

91330

webpack+vue项目实战(一,搭建运行环境和相关配置)

js语法是使用es6,还有使用到的一些资源比如,vue-router,vue-resource,webpack-dev-server等。...(vue,vue-template-compiler,element-ui这几个配置的版本号前面是没有^,这是因为项目不需要再更新这些资源了,因为之前试过,因为版本更新了的问题,导致element....idea是用webStorm编辑器开发,自动生成的文件 node_modules是安装之后生成的node模块文件, .npmrc是使用淘宝的镜像的文件,内容如下 registry = http://...结果是正常的,因为前面我们配置了路由,并且使用了路由!至于在地址后面为什么加上pos参数,下一章会说到! ? 路由(vue-router)。...最后,如果大家发现哪里写错了,或者是哪里写得不好,欢迎指点下。

1K10

Vue:基于Vue2的饿了么实战总结

Mock 使用调试环境搭建的服务器模拟后台JSON数据请求,涉及node的express操作,不理解原理没关系,只要会配置模拟数据就好,当然,一个好前端,node还是需要学习的 Vue-Resource...Vuex 之于 Vue 就像 Redux 之于 React,处理复杂的组件数据交互。...但是项目中只用刀了父子组件沟通,所以没有使用vuex Vue-Router的高级操作 这个前端路由还有很多的能力,比如懒加载,命名路由,history模式等。...如果你的项目中需要,你可能还是得参考API 表单控件操作 Vue对于表单控件使用了双向绑定,然而项目中没有需要输入的功能,因此没有包含此部分的练习 你可能遇到的坑 transition单独提出来...因此,让它每次进入食品详情页都新建一个bs对象,或许你会找到更好的方法 最后 如果你对于Vue并不熟悉,再或者你对JS的面向对象不熟悉,Array,String类型的原生操作不熟悉,ES6语法不熟悉,

1.1K70

Vue.js心得

这套组件库是基于 Vue 2 的,我们也希望大家开始使用 Vue 2,一起来丰富它的生态圈。...实践方案的话,vue + webpack + vue-router + vue-resource。 就个人而言,vue 的开发体验还是比较愉悦的。首先,文档非常友好,所以上手会比较快。...另外,适合做组件化开发(每个组件也是一个 .vue 文件,可以全局或者在需要的地方引入),如果遇到比较复杂的、父子组件间需要频繁通信的场景,可以用 vuex 搞定。...在写业务的过程中,团队的同事们抽象了很多公共组件出来,开源在 github (饿了么前端 · GitHub),大家有兴趣的话可以去试一试。...是一个 directive vue-loadmore:https://github.com/ElemeFE/vue-loadmore 下拉加载和拉加载。

12K70

创建vue项目的几种方式

nodejs可以到nodejs官网下载最新的版本,根据自己的操作系统选择合适的版本,然后安装,配置好环境变量即可。...安装完成之后可在开发模式下运行项目并预览项目效果 npm run dev; 如果项目可以正常启动,即可继续安装vue的辅助工具 npm install vue-router --save (路由管理模块) npm install vuex...--save (状态管理模块) npm install vue-resource --save (网路请求模块) 下面的两种方法是基于Vue Cli3的, Vue CLI3 需要 Node.js 8.9...:8000 具体可以参考使用图形化界面创建vue项目这篇文章,傻瓜式操作,基于图片界面的,创建、安装依赖和插件很方便。...参考资料 使用vue-cli脚手架创建新项目 怎样用vue-cli脚手架创建vue项目 使用vue-cli(vue脚手架)快速搭建项目 使用图形化界面创建vue项目 使用vue-cli3&vue ui图形化界面创建项目

3.2K20

基础系列(一)初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - 显示数据 - MVVM模式

模式编码简洁,体积小,运行效率高,适合 移动/PC 端开发它本身只关注 UI,可以轻松引入 vue 插件或其它第三方库开发项目采用组件化模式,提高代码复用率、且让代码更好维护声明式编码,让编码人员无需直接操作...DOM,提高开发效率使用虚拟DOM和Diff算法,尽量复用DOM节点0.2 与其他前端 JS 框架的关联借鉴 angular 的 模板 和 数据绑定 技术借鉴 react 的 组件化 和 虚拟DOM 技术...0.3 Vue 扩展插件vue-cli:vue 脚手架vue-resource(axios):ajax 请求vue-router:路由vuex:状态管理(它是 vue 的插件但是没有用 vue-xxx...;root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;root容器里的代码被称为【Vue模板】;Vue实例和容器是一一对应的;真实开发中只有一个Vue实例,并且会配合着组件一起使用...data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。

59110

网络模块封装

所以真实开发中很少直接使用, 而是使用jQuery-Ajax 选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax 相对于传统的Ajax非常好用. 为什么不选择它呢?...首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了. 那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理? jQuery的代码1w+行....Vue-resource的体积相对于jQuery小很多. 另外Vue-resource是官方推出的. 为什么不选择它呢?...原因是我们的项目部署在domain1.com服务器时, 是不能直接访问domain2.com服务器的资料的....所以, 封装jsonp的核心就在于我们监听window的jsonp进行回调时的名称. JSONP如何封装呢? 我们一起自己来封装一个处理JSONP的代码吧. JSONP封装

23730
领券