最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
Vue有五个核心概念,state
, getters
, mutations
, actions
, modules
。
Vuex分成五个部分:
1.State:单一状态树
2.Getters:状态获取
3.Mutations:触发同步事件
4.Actions:提交mutation,可以包含异步操作
5.Module:将vuex进行分模块
三、了解vuex中的各个js文件的用途
变量传值的演变形式
图解Vuex各组件
官方图解Vuex
1. vue中各个组件之间传值
1.父子组件
父组件–>子组件,通过子组件的自定义属性:props
子组件–>父组件,通过自定义事件:this.$emit(‘事件名’,参数1,参数2,…);
2.非父子组件或父子组件
通过数据总数Bus,this. r o o t . root. root.emit(‘事件名’,参数1,参数2,…)
3.非父子组件或父子组件
更好的方式是在vue中使用vuex
方法1: 用组件之间通讯。这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕。
方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据
四、vuex初步使用步骤
1.安装
npm install vuex -S
2 .创建store模块,分别维护state/actions/mutations/getters
3. 在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块
import Vue from ‘vue’
import Vuex from ‘vuex’
import state from ‘./State’
import getters from ‘./Getters’
import actions from ‘./Actions’
import mutations from ‘./Mutations’
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})export default store
4. 在main.js中导入并使用store实例
main.js
import store from ‘./store’
new Vue({
el: ‘#app’,
data(){
return{
Bus:new Vue({
})
}
},
router,
store,//在main.js中导入store实例
components: { App },
template: ‘’
})
5. 之后按要求编码,即可使用vuex的相关功能
vuexPage1.vue
页面1:欢迎来到{{msg}}
6.配置路由
import vuexPage1 from ‘@/views/sys/vuexPage1’
{
path: ‘/sys/vuexPage1’,
name: ‘vuexPage1’,
component: vuexPage1
}
7.展示结果
五、vuex取值
1.在state.js编写全局要读取的数据
export default{
resturantName:‘慧慧餐馆’
}
2.在VuexPage1和VuexPage2中填写计算属性
computed:{//计算属性
msg(){
//return “KFC”;
return this.$store.state.resturantName;
}
}
结果:
vuex第二种取值方法:
1.Getterts.js
export default{
getResturanName:(state)=>{
return state.resturantName;
}}
2.调用
computed:{//计算属性
msg(){
//return “KFC”;
//return this. s t o r e . s t a t e . r e s t u r a n t N a m e ; ∗ ∗ r e t u r n t h i s . store.state.resturantName; **return this. store.state.resturantName; ∗∗returnthis.store.getters.getResturanName;//推荐使用这种**
}
}
六、vuex存值
1.处理数据的唯一途径,state的改变或赋值只能在这里Mutation.js
export default{
// type(事件类型): 其值为setResturantName
最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。