vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作


Posted in Javascript onJuly 31, 2020

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

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

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

运行命令 npm install vuex --save-dev

在项目的入口js文件 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+axios从后台获取数据存入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 ,大家可以看看整个流程是如何走的

以上这篇vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
You might like
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
js常见表单应用技巧
2008/01/09 Javascript
Firefox div高度自适应
2009/04/28 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
js简单时间比较的方法
2016/08/02 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Python实现扩展内置类型的方法分析
2017/10/16 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
商务英语本科生的自我评价分享
2013/11/15 职场文书
社团活动策划书范文
2014/01/09 职场文书
社区八一活动方案
2014/02/03 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
付款委托书范本
2014/10/05 职场文书
三下乡个人总结
2015/03/04 职场文书
科技馆观后感
2015/06/08 职场文书