详细讲解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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jQuery限制图片大小的方法
May 25 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
解决Python requests 报错方法集锦
2017/03/19 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python实现飞船大战
2020/04/24 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
家长给孩子的评语
2014/01/30 职场文书
联谊会主持词
2014/03/26 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
离婚案件被告代理词
2015/05/23 职场文书
亮剑观后感
2015/06/05 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python
MySQL中order by的执行过程
2022/06/05 MySQL