前端开发学习之【Vue】-下
文章目录
- Vuex
- 1.概述
- 2.使用
- 3.四个 map 方法
- 4.模块化+命名空间
- Vue Router
- 1.SPA
- 2.路由
- 3.基本使用
- 4.多级路由
- 5.路由传参query参数
- 6.命名路由
- 7.路由传参params参数
- 8.路由的props配置
- 9.路由跳转方式
- 10.缓存路由
- 11. activated deactivated生命周期钩子
- 12.路由守卫
- 13.路由器的两种工作模式
- 上线项目
Vuex
1.概述
Vuex 是什么
概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
什么时候使用 Vuex：
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
原理：
- vuex包含三个主要组成部分：actions、mutations、state，它们都有store管理；
- vue组件通过dispatch函数发送给vuex以操作名称和操作数，然后actions接收到之后调用commit函数发送给mutations；（存在actions是为了需要发送ajax请求才知道操作数的情况），当然已知操作数可以直接调用commit而不调用dispatch；
- mutations调用mutate函数传输计算后的数据给state；
- state调用render函数将数据传递给vc。
2.使用
使用vuex：
- 下载vuex：
npm i vuex； - 创建src/store/index.js该文件用于创建Vuex中最为核心的store：
import Vue from 'vue'
import Vuex from 'vuex' // 引入VuexVue.use(Vuex) // 应用Vuex插件const actions = {} // 准备actions——用于响应组件中的动作
const mutations = {} // 准备mutations——用于操作数据（state）
const state = {} // 准备state——用于存储数据// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})
- 在src/main.js中创建vm时传入store配置项：
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入storeVue.config.productionTip = falsenew Vue({el: '#app',render: h => h(App),store, // 配置项添加storebeforeCreate() {Vue.prototype.$bus = this}
})
- 编写代码：
Vuex的基本使用：
①初始化数据state，配置actions、mutations，操作文件store.js
②组件中读取vuex中的数据$store.state.数据
③组件中修改vuex中的数据$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)
若没有网络请求或其他业务逻辑，组件中也可越过actions，即不写dispatch，直接编写commit
import Vue from 'vue'
import Vuex from 'vuex' // 引入VuexVue.use(Vuex) // 应用Vuex插件// 准备actions——用于响应组件中的动作
const actions = {/* jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)}, */jiaOdd(context,value){ // context 相当于精简版的 $storeconsole.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
// 准备mutations——用于操作数据（state）
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}
}
// 准备state——用于存储数据
const state = {sum:0 //当前的和
}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})
使用：
$store.state.sum
getters配置项：
概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性
在store.js中追加getters配置：
const getters = {bigSum(state){return state.sum * 10}
}// 创建并暴露store
export default new Vuex.Store({......getters
})
3.四个 map 方法
mapState方法：用于帮助映射state中的数据为计算属性，相当于完成一个等于
computed: {// 借助mapState生成计算属性：sum、school、subject（对象写法一）...mapState({sum:'sum',school:'school',subject:'subject'}),// 借助mapState生成计算属性：sum、school、subject（数组写法二）...mapState(['sum','school','subject']),
},
mapGetters方法：用于帮助映射getters中的数据为计算属性
computed: {//借助mapGetters生成计算属性：bigSum（对象写法一）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法二）...mapGetters(['bigSum'])
},
mapActions方法：用于帮助生成与actions对话的方法，即包含$store.dispatch(xxx)的函数
methods:{//靠mapActions生成：incrementOdd、incrementWait（对象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（数组形式）...mapActions(['jiaOdd','jiaWait'])
}
mapMutations方法：用于帮助生成与mutations对话的方法，即包含$store.commit(xxx)的函数
methods:{//靠mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（对象形式）...mapMutations(['JIA','JIAN']),
}
mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象
组件：
<template><div><h1>当前求和为：{{ sum }}</h1><h3>当前求和的10倍为：{{ bigSum }}</h3><h3>我是{{ name }}，我在{{ school }}学习</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="addOdd(n)">当前求和为奇数再加</button><button @click="addWait(n)">等一等再加</button></div>
</template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex' //
前端开发学习之【Vue】-下相关推荐
- 老前端工程师现身说法，2021Web前端开发学习路线图
导读:2021Web前端开发学习路线图 三大件学习 现在每年依旧有很多初级入门的前端开发.所以对初入门的朋友也给出一点意见. 刚入门的朋友,我觉得不应该一开始就学习像Vue.TypeScript.We ...
- 前端开发学习路线图，完整学习教程+工具+框架
回看近年的前端发展,不管是之前的散装前端时代,还是后来插件化.模块化的演进,亦或是现如今如火如荼的前端工程化迭代,发展速度实在是太快了,各种框架层出不穷,这些难免会让我们这些学习者眼花缭乱,满腹疑团. ...
- Web前端开发学习【1】-----大学生如何购买学生版的阿里云服务器，或免费领取半年的阿里云服务器
Web前端开发学习[1]-----大学生如何购买学生版的阿里云服务器,或免费领取半年的阿里云服务器目录 一.进入阿里云官网.注册阿里云账号 1.百度搜索关键词[阿里云服务器],然后进入官网 2.免费注 ...
- 重磅推出：分享阿里云大学前端开发学习路线链接
重磅推出:分享阿里云大学前端开发学习路线链接 这是一份阿里云大学推出前端开发学习路线,适合入门.也适合刚入职场一两年的小伙伴,来一个基础知识进行加深视频学习.内容言简意赅,通过demo练习等来理解学习 ...
- ul 原点显示_web前端开发学习教程，CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连 目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
- 前端开发学习笔记（一）：HTML
前端开发学习笔记(一):HTML 文章目录 前端开发学习笔记(一):HTML 一. HTML的文档结构 二.标签属性 2.1. 标签属性 2.2. 文字格式化标签 2.3. html实体转义 三. t ...
- 前端开发学习及工具网站（持续更新）
前端开发学习及工具网站 该文章主要是记录前端开发中好的学习网站或者工具网站 大部分实用网站来源抖音鱼皮大佬分享,这里分享给大家 1.w3cschool(编程狮) 这个网站适合0基础学前端的同学,内容简 ...
- 前端开发工程师（VUE框架）招聘
前端开发工程师(VUE框架) 岗位职责: 1.熟练运用HTML/JS/CSS等前端技术,精通JavaScript.Ajax.DOM.html.css等前端技术 2.熟练使用VUE前端框架,理解VUE框 ...
- 2018web前端学习路线，详谈web前端开发学习路线
近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...
- 送给大家一套完整的web前端开发学习路线
本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...
最新文章
- acm经典题Mark
- 哪种营销方法效果最差_网络营销推广中如何监控评测网络效果？
- JavaWeb(二)——Http协议
- java webservice接口开发_给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)
- Native snappy library not available: this version of libhadoop was built without snappy support
- easyswoole数据库连接池_如何在 Swoole 中优雅的实现 MySQL 连接池
- 3级调度 fpga_Vivado HLS学习笔记——1.了解FPGA架构
- 企业微信加密消息体_用企业微信小程序发送消息
- Java泛型中extends和super的区别？
- 一分钟学会看k线图_1分钟学会看K线请笑纳70种经典K线组合形态，绝对干货，轻松低买高卖！...
- phpmemcache
- android学习笔记---手机拍照功能的实现，及原理
- 几张动态图弄懂递归，二叉树，二分查找简短算法
- 一个高难度的 Java 3D 智力游戏，立方四子棋
- 第三方支付api接口是什么？
- 100层楼扔两个鸡蛋的问题
- C#实现微信公众号群发消息（解决一天只能发一次的限制）
- A* 算法简介 from Red Blob Games(译文)
- n子棋，你能下赢电脑吗，来玩玩吧
- 河北单招计算机英语,2019年河北高职单招考试十类 和对口电子电工类、计算机类联考 专业基础考试（英语）考试大纲.doc...
热门文章