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

小编这次要给大家分享的是vue + vuex + axios如何实现从后台获取数据存入vuex,组件之间共享数据,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

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

整个的流程是在组件的创建中提交调度,然后通过行动调用一个封装好的axios然后再触发突变来提交状态改变状态中的数据,然后在组件的计算属性中获取国家的数据并渲染在页面上

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

运行命令npm安装vuex——save-dev

在项目的入口js文件主要。js中

从& # 39;进口商店。/存储/指数# 39;

并将存储挂载到vue上

新Vue ({
　　艾尔:& # 39;#应用# 39;
　　路由器,
　　商店,
　　模板:& # 39;& lt;应用程序/祝辞& # 39;
　　呈现:(createElement)=比;createElement(应用)
　　})

然后看下整个商店的目录结构,模块文件夹用来将不同功能也面的状态分成模块,指数。js文件夹是商店的入口文件,类型文件夹是定义常量突变的文件夹

整个vuex的目录结构如下:

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

<强>在取文件夹下新建api。js文件:

从& # 39;进口axios axios& # 39;
　　
　　导出函数获取(url, params) {
　　返回新的承诺((解决,拒绝)=比;{
　　axios。帖子(url参数)
　　不要犹豫(反应=比;{
　　警报(& # 39;Api——好# 39;);
　　解决(response.data);
　　})
　　.catch(错误)=比;{
　　console.log(错误)
　　拒绝(错误)
　　})
　　})
　　}
　　
　　出口默认{//获取我的页面的后台数据
　　mineBaseMsgApi () {
　　警报(& # 39;进入api.js& # 39;)
　　返回获取(& # 39;/api/getBoardList& # 39;);
　　}
　　}

<>强在商店的入口文件索引。js中:

从& # 39;进口Vue Vue # 39;
　　从& # 39;进口Vuex vuex& # 39;
　　
　　从& # 39;进口矿。/模块/我# 39;;
　　
　　Vue.use (Vuex);
　　
　　出口默认新Vuex.Store ({
　　模块:{
　　我的
　　}
　　});

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

创建(){ 　　美元。store.dispatch (& # 39; getMineBaseApi& # 39;); 　　}

然后在存储/模块下的对应模块js文件中,这里我使用的我的。js文件中编写状态,行动和变异

进口api。/. ./. ./卖/api # 39;;
　　进口*从& # 39;类型。/. ./types.js& # 39;;
　　
　　const状态={
　　getMineBaseMsg: {
　　errno: 1、
　　味精:{}
　　}
　　}
　　
　　const行动={
　　getMineBaseApi({提交}){
　　警报(& # 39;进入行动# 39;);
　　api.mineBaseMsgApi ()
　　不要犹豫(res=比;{
　　警报(& # 39;行动中调用封装后的axios成功& # 39;);
　　console.log(& # 39;行动中调用封装后的axios成功& # 39;)
　　提交(类型。GET_BASE_API res)
　　})
　　}
　　}
　　
　　const getter={
　　getMineBaseMsg:状态=比;state.getMineBaseMsg
　　}
　　
　　const突变={
　　(类型。GET_BASE_API](状态,res) {
　　警报(& # 39;进入突变# 39;);
　　状态。getMineBaseMsg={…状态。getMineBaseMsg、味精:res.data。味精}
　　警报(& # 39;进入突变修改状态成功& # 39;);
　　}
　　}
　　
　　出口默认{
　　状态,
　　行动,
　　getter方法,
　　突变
　　}

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

进口{mapGetters} & # 39; vuex& # 39;;
　　
　　出口默认{
　　…
　　计算:{
　　……mapGetters (
　　& # 39;getMineBaseMsg& # 39;
　　]）
　　},
　　…
　　}

然后在控制台查看把:

getter和突变都已经成功了,同时我在提交州的整个过程都添加了警报,大家可以看看整个流程是如何走的

看完这篇关于vue + vuex + axios如何实现从后台获取数据存入vuex,组件之间共享数据的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。

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