最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML 和 CSS:
online:true
}
})
computed:{
status(){
return this.$store.state.online
}
}
store 中的数据发生改变时,都会重新求取计算属性,并更新相关 DOM。
2》如果需要使用多个参数时,都使用 computed 计算属性,就会使代码变的有些冗余和复杂,此时我们就可以借助 mapState 辅助函数。
//state 中数据比较多,引用到一个组件内
export default new Vuex.Store({
state:{
online:true,
per:[
{name:‘qq’,age:18}
],
role:‘管理员’
}
})
//组件内
import { mapState } from ‘vuex’
export default {
name: ‘App’,
computed: mapState({
online: state => state.online,
per: ‘per’, // 'per’就相当于 state.per
role: ‘role’ // 'role’就相当于 state.role
})
}
vuex 使用单一状态树来管理应用层级的全部状态,单一状态树能够让我们最直接的方式找到某个状态的片段,而且之后的维护和调试过程,也可以非常方便管理和维护。
3.2、getters
从 store 中获取一些 state 变异后的状态。
使用的时候一般有两种方式:
1》返回的结果只依赖于 state 中的数据
export default new Vuex.Store({
state:{
count:2,
},
getters:{
//返回 count 的 2 倍数据
countDouble(state){
return state.count*2
}
}
})
//组件中引用
//运行结果
获取countDouble:4
此处,$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。
2》getters 中返回的变异结果,依赖于某个 getters 中属性返回结果
export default new Vuex.Store({
state:{
count:2,
},
getters:{
//返回 count 的 2 倍数据
countDouble( state ){
return state.count * 2
}
//返回 countDouble 的 2 倍数据
countDoubleT( state , getters ){
return getters.countDouble * 2
}
}
})
//组件中引用
//运行结果
获取countDouble:8
3.3、mutations
vuex 的store 状态的更新唯一方式:提交 Mutation。
Mutations 主要包括两部分:
-
字符串的事件类型
-
一个回调函数,该回调函数的第一个参数就是 state。
1》、mutation 中的方法通过 commit 调用,不传参数使用:
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
incrs(state){
// count 加 1
state.count++
}
}
})
//组件调用
<button @click=" $store.commit(‘incrs’) " >+
{{$store.state.count}}
按钮每点一次,count 就会自加一次。
2》mutations 传递参数
我们点击加按钮时,指定每次点击增加的数值,如下:
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
addNum( state,n ){
// count 加 1
state.count +=n
}
}
})
//组件调用
<button @click=" $store.addNum( ‘incrs’ , 5 ) " >+
{{$store.state.count}}
//运行结果
每点一次按钮,count 增加 5
上个实例传递的是一个参数,如果我们需要传递多个参数时,该如何实现呢?
3》mutations 传递多个参数
export default new Vuex.Store({
state:{
count:2,
},
mutations:{
addNum(state,payload){
// payload 是传递过来的参数对象
state.count += payload.count
}
}
})
//组件调用
<button @click=“addTen” >加10
{{$store.state.count}}
export default{
methods:{
addTen(){
this.$store.commit({
type:‘addNum’,
count:10,
…//可以传任意多个参数
})
}
}
}
//运行结果
每点一次按钮,count 增加 10
上述方法是 mutations 特殊的提交封装。包含了 type 属性的对象,将整个 commit 的对象作为 payload 使用。
3.4、actions
mutations 提交更新数据的方法,必须是同步的,如果是异步使用就会出现问题,然后在项目开发中往往就会用到异步更新,比如网路请求数据。
actions 是类似于 mutation,功能大致相同,但是 actions 是用来替代 mutations 进行异步操作的。
1》actions 的基本使用
actions:{
aUpdateCount(context){
setTimeout(()=>{ //使用定时器模拟异步操作
context.commit(‘updateCount’)
},2000)
}
},
mutations:{
updateCount(state){
state.count = 5201314
},
}
// 组件内使用
{{$store.state.count}}
<button @click=“$store.dispatch(‘aUpdateCount’)”>异步更新count
//运行结果
点击按钮,两秒后更新 count 值为5201314
值得注意的是,使用 actions 异步更新数据的时候,还是需要经过 mutations 中的方法,state 中的数据只能由 mutations 中的方法修改。
调用 mutations 中的方法,使用 commit 调用。
调用 actions 中的方法,使用 dispatch 调用。
2》异步更新的时候,也可以带参数
// 功能:点击按钮,指定 count 修改的值
actions:{
aUpdateCount( context, payload ){
setTimeout(()=>{ //使用定时器模拟异步操作
context.commit( ‘updateCount’ , payload )
},2000)
}
},
mutations:{
updateCount( state , payload ){
state.count = payload
},
}
// 组件内使用
{{$store.state.count}}
<button @click=“$store.dispatch( ‘aUpdateCount’, ‘我爱前端’ )”>异步更新count
//运行结果
点击按钮,两秒后更新 count 值为: 我爱前端
3》传入异步参数
actions:{
//传入promise
updateData(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(‘我学会了’)
},2000)
})
},
}
//组件内调用
<button @click=“ok”>promise执行成功,返回"我学会了"
methods:{
ok(){
this.$store.dispatch(‘updateData’).then((res)=>{
console.log(res)
})
},
}
//运行结果
点击按钮,两秒后打印:我学会了
3.5、modules
modules 是模块的意思,vue 使用单一状态树,项目越来越大,store 中的数据越来越多,不便于数据的管理和维护,代码也会变得臃肿。因此使用 modules ,把数据划分到对应的某个模块,既便于开发,也提高代码的可读性。
1》modules 简单使用
import Vue from ‘vue’
import Vuex from ‘vuex’
import { Increase } from ‘./mutation_type.js’
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
actions: {},
getters: { },
mutations: { },
modules:{
a:{
state:{},
getters:{},
mutations:{},
actions:{}
},
b:{
state:{},
getters:{},
mutations:{},
actions:{}
}
},
})
//也可以整理为
const moduleA = {
state:{},
getters:{},
mutations:{},
actions:{}
}
const moduleB = {
state:{},
getters:{},
mutations:{},
actions:{}
}
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
actions: {},
getters: { },
mutations: { },
modules:{
a: moduleA,
b: moduleB
},
})
2》模块中的数据如何使用呢?
const moduleA = {
state:{
aName:‘我是模块a的数据’
},
getters:{},
mutations:{},
actions:{}
}
// 组件内引用
{{ $store.state.a.aName }}
最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。