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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
js编写选项卡效果
May 23 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
自动更新作用
2006/10/08 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
vue axios整合使用全攻略
2018/05/24 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue实现评价星星功能
2020/06/30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
餐饮营销方案
2014/02/23 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
健康状况证明模板
2014/10/23 职场文书