vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

  • 时间:2017-05-07
  • 分类:JavaScript
  • 2001 人浏览
[导读]这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex,组件之间共享数据

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅。

整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex:

运行命令

在项目的入口is文件main.js中

并将store挂载到vue上

然后看下整个store的目录结构,modules文件夹用来将不同功能也面的状态分成模块,index.js文件夹是store的入口文件,types文件夹是定义常量mutation的文件夹

整个vuex的目录结构如下:

这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

在fetch文件夹下新建api.js文件:

在store的入口文件index.js中:

在你需要请求后台数据并想使用vuex的组件中的created分发第一个dispatch:

然后在store/modules下的对应模块js文件中,这里我使用的mine.js文件中编写state、action和mutation

然后在想取回state的组件中使用mapgetters获取state:

然后在控制台查看把:

getter和mutation都已经成功了,同时我在提交state的整个过程都添加了alert,大家可以看看整个流程是如何走的。

来源:本文为线上采编,如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除!