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 Array(数组)相关方法简述
Jul 25 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python查找相似单词的方法
2015/03/05 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python requests post多层字典的方法
2018/12/27 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
安全生产专项整治方案
2014/05/06 职场文书
事业单位考核材料
2014/05/21 职场文书
应届生求职信
2014/05/31 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript