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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
在 Vue.js中优雅地使用全局事件的方法
Feb 01 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Prototype Template对象 学习
2009/07/19 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
关于Django外键赋值问题详解
2017/08/13 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python中什么是面向对象
2020/06/11 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
初中生期末评语大全
2014/04/24 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
骨干教师考核评语
2014/12/31 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
电频谱管理的原则是什么
2022/02/18 无线电