首页
学习
活动
专区
工具
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 数量,加快首屏渲染,至于性能方面感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。

2.1K40

【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.4K120
  • 《进阶篇第9章》学习vuex知识点后练习:把求和案例改成vuex版代码

    this.sum += this.n}}注意点2:问题:select下拉框默认为1时,点击加号没问题,但是下拉框选中为2时,n值变成字符串了,不应该是数字类型名?...注意点4:问题:既然actions中context能获取state中的sum,那我直接在actions函数中操作,跳过mutations这步骤不就得了?...插件监测不到,有点乱拳打死老师傅的感觉,但是最好不这么使用,还是使用标准的流程,actions =》 mutations =》 state比较好,因为按照标准会有很多辅助工具辅助你。...直接写在Count.vue的函数中多好,这样actions压根不用写代码答案:因为写在Count.vue中的代码不能复用,而写在actions里面可以直接复用.../App.vue'//引入插件import vueResource from 'vue-resource'//引入storeimport store from '.

    8210

    解决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的原型链

    3.3K20

    Vue.js 实战总结

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

    8.3K31

    前后端分离实践:基于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

    vue2知识点:理解vuex、安装vuex、搭建vuex环境

    8.1.2什么时候使用 Vuex多个组件依赖于同一状态 来自不同组件的行为需要变更同一状态8.1.3全局事件总线和vuex的区别全局事件总线查询和修改共享数据,需要使用多次\$emit+\$on,非常不方便...解决方案就是把引入vuex和引入store和使用Vue.use(Vuex)全部放在index.js文件中,这样就能确保加载顺序一致。.../App.vue'//引入插件import vueResource from 'vue-resource'//引入storeimport store from '....Vuex插件Vue.use(Vuex)//准备actions——用于响应组件中的动作const actions = {}//准备mutations——用于操作数据(state)const mutations...《进阶篇第8章:vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间2.vue2知识点:理解vuex、安装vuex、搭建vuex环境3.vue2知识点:vuex

    10110

    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,而不是直接变更状态

    1K30
    领券