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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
javascript parseInt 大改造
Sep 27 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
使用FormData实现上传多个文件
2018/12/04 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
女性时尚网购:Chic Me
2019/07/30 全球购物
酒店节能降耗方案
2014/05/08 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL