详细讲解vue2+vuex+axios


Posted in Javascript onMay 27, 2017

在vue2项目中,组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下(后台获取数据存入vuex,组件之间共享数据),那么就需要用vuex来管理这些。

整个的流程是在组件的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的目录结构如下:

详细讲解vue2+vuex+axios

这里我新建了文件夹fetch用来编写所有的axios处理(这里是把axios封装了)并且在fetch文件夹下新建api.js文件:

import axios from 'axios'
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 axios.defaults.baseURL = '后台接口公共前缀';
 export function fetch(url, params) {
  return new Promise((resolve, reject) => {
   axios.post(url, params)
    .then(response => {
    resolve(response.data);
 })
 .catch((error) => {
  reject(error);
  })
 })
 }
 export default {
 // 获取我的页面的后台数据
  mineBaseMsgApi() {
  // alert('进入api.js')
   return fetch('/api/getBoardList');
  },
  commonApi(url, params) {
  return fetch(url, params)
  }
 }

在store的入口文件index.js中:

// 组装模块并导出 store 的文件
 import Vue from 'vue'
 import Vuex from 'vuex'
 import mine from './modules/mine';
 import club from './modules/club';
 Vue.use(Vuex);
 // 导出需要的模块
 export default new Vuex.Store({
  modules: {
   club,
   mine
  }
 });

一般在项目中,我们跟在交互的时候,无非是存数据和取数据。首先我们来看存数据:

1:在你需要请求后台数据并想使用vuex的组件中的created分发第一个dispatch:

created() {
  // 保存ID到vuex,在购买页面使用
  this.$store.dispatch('storeMovieID',this.$route.params.ID)——(“action名”,data);
  api.commonApi('url','params')
   .then(res => {
    this.backMsg = res.data;
    console.log(this.backMsg);
    console.log('调用封装后的axios成功');
   })
 },

2:然后在store/modules下的对应模块js文件中,这里我使用的club.js文件中编写state、action和mutation(一般为了方便,我们会习惯的把action里面的名字以驼峰式命名,而mutation里面的命名,我们会采用全大写+下划线的命名方式)actions 用来触发mutations,action可以进行异步操作 ,在action里可以用commit提交mutations

const actions = {
  // 保存ID storeMovieID为上面的"action名"
  storeMovieID({ commit }, res) {
   //此处是触发mutation的 STORE_MOVIE_ID为"mutation名"
   commit(types.STORE_MOVIE_ID, res);
  },
 }

3:我们需要在type.js里面定义常量:

// ID 变量名(大写)=‘常量名(大写)'
export const STORE_MOVIE_ID = 'STORE_MOVIE_ID';

4:通过mutation修改state中的数据:

//mutation名常量定义 并且需要在type.js文件下定义常量
const mutations = {
 // 修改ID 中括号代表常量 [types.常量名]
 [types.STORE_MOVIE_ID]( state, res) {
  state.movieID = res;  //state.数据名 = data
 },
}

5:定义state数据:(数据名:初始值)

const state = {  //采用 数据名:初始值的格式
 contextPathSrc: '后台接口公共部分',
 movieID: '',
}

最后所有的club.js完整内容如下:(当然getters是在取数据的时候用的,下面会讲)

import api from './../../fetch/api';
import * as types from './../types.js';
// state 是vuex 保存数据的,就相当于vue里的data
const state = {
 contextPathSrc: '后台接口公共部分',
 movieID: '',
}
const actions = {
 // 保存ID storeMovieID为上面的"action名"
 storeMovieID({ commit }, res) {
  //此处是触发mutation的 STORE_MOVIE_ID为"mutation名"
  commit(types.STORE_MOVIE_ID, res);
 },
}
const getters = {
 // 图片公共 src 的获取 getter函数:state=> state.数据名
 getContextPathSrc: state => state.contextPathSrc,
 // 获取ID
 movieID: state => {
  if(state.movieID == ''){
   return localStorage.getItem('STORE_MOVIE_ID');
  }else{
   return state.movieID;
  }
 },
}
//mutation名常量定义 并且需要在type.js文件下定义常量 mutations 用来向state提交数据的,只能进行同步操作
const mutations = {
 // 修改ID 中括号代表常量 我们可使用ES2015风格的计算属性命名功能来使用一个常量[types.STORE_MOVIE_ID]作为函数名
 [types.STORE_MOVIE_ID]( state, res) {
  state.movieID = res;
 },
}
export default {
 state,
 actions,
 getters,
 mutations
}

下边我们要说的是取数据并且渲染到页面中,或者在页面函数中使用的方法:

1:组建中你需要导入如下:

import { mapGetters } from 'vuex';

在组件的计算属性中,如下:

computed: {
 ...mapGetters([//...函数名 使用对象展开运算符将此对象混入到外部对象中
  'getContextPathSrc'
  ])
 },

这里的getContextPathSrc函数,在页面中可直接使用,如果在函数中使用,需要this.getContextPathSrc

2:最后在store中写getters函数:

const getters = {
  // 图片公共 src 的获取 getter函数:state=> state.数据名
  getContextPathSrc: state => state.contextPathSrc,
 }

最后在页面渲染就可以了。。这样就完成了交互。可能有人会留意到上面的getters里的movieID函数有个if判断,最后

return localStorage.getItem('STORE_MOVIE_ID')

有人会好奇为啥用localStorage……这个我们也不想用,只是如果你的页面如果用户强制刷新一下的话,会有个很奇怪的事发生,就是数据全部取不到,后来是没办法才加的。

最后,希望这些讲解,对于初学者来说有帮助……别被vuex的官网整的云里雾里(ps:我初学时也云里雾里整不明白偷笑)。好了,下班啦,更多的内容,会慢慢跟大家分享。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
AngularJS获取json数据的方法详解
May 27 #Javascript
vue中用H5实现文件上传的方法实例代码
May 27 #Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
详解如何使用webpack打包Vue工程
May 27 #Javascript
Jquery中attr与prop的区别详解
May 27 #jQuery
angular使用post、get向后台传参的问题实例
May 27 #Javascript
AngularJS中使用ngModal模态框实例
May 27 #Javascript
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
JS实现浏览上传文件的代码
2017/08/23 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
为python设置socket代理的方法
2015/01/14 Python
Python中super函数的用法
2017/11/17 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python语言快速上手学习方法
2018/12/14 Python
Django框架反向解析操作详解
2019/11/28 Python
如何在django中添加日志功能
2020/02/06 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
介绍一下Java的安全机制
2012/06/28 面试题
UNIX文件系统分类
2014/11/11 面试题
自我鉴定三原则
2014/01/13 职场文书
新法人代表任命书
2014/06/06 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server