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 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
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
php面向对象的方法重载两种版本比较
2008/09/08 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python3 操作符重载方法示例
2017/11/23 Python
python实现简单flappy bird
2018/12/24 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
幼儿园中班教学反思
2014/02/10 职场文书
广告语设计及教案
2014/03/21 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
反四风问题学习心得体会
2016/01/22 职场文书