详细讲解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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
JavaScript中对象介绍
Dec 31 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
vue之延时刷新实例
Nov 14 Javascript
基于JS判断对象是否是数组
Jan 10 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解析json数据实例
2014/08/19 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
python版学生管理系统
2018/01/10 Python
Numpy数组的保存与读取方法
2018/04/04 Python
详解python中的装饰器
2018/07/10 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python实现多张图片拼接成大图
2019/01/15 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
django-csrf使用和禁用方式
2020/03/13 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
2014年“世界无车日”活动方案
2014/09/21 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
学校教学管理制度
2015/08/06 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技