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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
Js面试算法详解
Apr 08 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
Ajax PHP分页演示
2007/01/02 PHP
discuz安全提问算法
2007/06/06 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue实现计步器功能
2019/11/01 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python脚本监控docker容器
2016/04/27 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
新闻报道策划方案
2014/06/11 职场文书
保险专业求职信
2014/07/07 职场文书
单位考核聘任报告
2015/03/02 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
婚礼父母致辞
2015/07/28 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server