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


Posted in Javascript onApril 22, 2017

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

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

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

运行命令

npm install vuex --save-dev

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

import store from './store/index'

并将store挂载到vue上

new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 render: (createElement) => createElement(App)
})

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

整个vuex的目录结构如下:

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

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

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

import axios from 'axios'

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
         alert('Api--ok');
        resolve(response.data);
      })
      .catch((error) => {
       console.log(error)
        reject(error)
      })
  })
}

export default {
 // 获取我的页面的后台数据
 mineBaseMsgApi() {
   alert('进入api.js')
  return fetch('/api/getBoardList');
 }
}

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

import Vue from 'vue'
import Vuex from 'vuex'

import mine from './modules/mine';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {
  mine
 }
});

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

created() {
  this.$store.dispatch('getMineBaseApi');
 }

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

import api from './../../fetch/api';
import * as types from './../types.js';

const state = {
 getMineBaseMsg: {
  errno: 1,
  msg: {}
 }
}

const actions = {
 getMineBaseApi({commit}) {
  alert('进入action');
  api.mineBaseMsgApi()
  .then(res => {
    alert('action中调用封装后的axios成功');
    console.log('action中调用封装后的axios成功')
    commit(types.GET_BASE_API, res)
  })
 }
}

const getters = {
 getMineBaseMsg: state => state.getMineBaseMsg
}

const mutations = {
 [types.GET_BASE_API](state, res) {
  alert('进入mutation');
  state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }
  alert('进入mutations修改state成功');
 }
}

export default {
 state,
 actions,
 getters,
 mutations
}

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

import { mapGetters } from 'vuex';

export default {
 ...
 computed: {
  ...mapGetters([
   'getMineBaseMsg'
  ])
 },
 ...   
}

然后在控制台查看把:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
Vue.use源码分析
Apr 22 #Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 #Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
微信支付的开发流程详解
2016/09/13 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python实现端口转发器的方法
2015/03/13 Python
详解python中各种文件打开模式
2020/01/19 Python
keras topN显示,自编写代码案例
2020/07/03 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
音乐教学案例
2014/01/30 职场文书
家长会主持词
2014/03/26 职场文书
保密工作承诺书
2014/08/29 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
图文详解nginx日志切割的实现
2022/01/18 Servers
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
python内置模块之上下文管理contextlib
2022/06/14 Python