前端资料汇总
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
vuex
类似Redux
的状态管理器, 用来管理Vue
的所有组件状态,采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。
状态机就是保存你的状态和状态变化的一个盒子。这里有一些不同种类的状态机,适用于我们这个案例的是有限状态机。像它的名字一样,有限状态机包含有限的几种状态。它接收一个输入并且基于这个输入和当前的状态决定下一个状态,可能会有多种情况输出。当状态机改变了状态,我们就称为它过渡到一个新的状态
每一个 Vuex
应用的核心就是 store
(仓库)。store
基本上就是一个容器,它包含应用中大部分的状态 (state
)。Vuex
和单纯的全局对象有以下两点不同:
Vuex
的状态存储是响应式的。当Vue
组件从store
中读取状态的时候,若store
中的状态发生变化,那么相应的组件也会相应地得到高效更新。- 不能直接改变
store
中的状态。改变store
中数据状态的唯一途径就是显式地提交 (commit
)mutation
。
这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
三、安装并引入 Vuex
项目结构如下:
注:当应用变得比较复杂时候,store
对象有可能变的相当臃肿。在此情况下,vuex
允许将store
分割成模块(module
),每个模块有自己的state
,mutation
,action
,getter
甚至是嵌套子模块等。
首先使用 npm
安装 Vuex
。
cnpm install vuex -S
然后在main.js
中 引入store.js
, 然后注入 store
。
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
// 让vue使用vuex工具来实现组件之间的数据共享
Vue.use(Vuex)
/\* eslint-disable no-new \*/
new Vue({
el: '#app',
// 注入 store
store,
render: h => h(App)
})
四、构建核心仓库 store.js
Vuex
应用的状态 state
都应当存放在 store.js
里面,Vue
组件可以从 store.js
里面获取状态,可以把 store
通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别,主要体现在当 store
中的状态发生改变时,相应的 vue
组件也会得到高效更新。
在 src
目录下创建一个 vuex
目录,将 store.js
放到 vuex
目录下。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态,存储数据的对象,我们可以将你需要存储的数据在这个state中定义
state: {
author: 'Wise Wrong'
}
})
export default store
这是一个最简单的 store.js
,里面只存放一个状态 author
。
注:虽然在 main.js
中已经引入了 Vue
和 Vuex
,但是这里还得再引入一次.
五、将状态映射到组件
<template>
<footer class="footer">
<ul>
<li v-for="lis in ul">{{lis.li}}</li>
</ul>
<p>
Copyright © {{author}} - 2020 All rights reserved
</p>
</footer>
</template>
<script>
export default {
name: 'footerDiv',
data () {
return {
ul: [
{ li: '琉璃之金' },
{ li: '朦胧之森' },
{ li: '缥缈之滔' },
{ li: '逍遥之火' },
{ li: '璀璨之沙' }
]
}
},
computed: {
author () {
return this.$store.state.author
}
}
}
</script>
这是 footer.vue 的 html 和 script 部分。
在 computed
中,将 this.$store.state.author
的值返回给 html
中的 author。页面渲染之后,就能获取到 author 的值。
六、在组件中修改状态
然后在 header.vue 中添加一个输入框,将输入框的值传给 store.js
中的 author,这里使用 Element-UI 作为样式框架。
上面将输入框 input
的值绑定为 inputTxt,然后在后面的按钮 button
上绑定 click
事件,触发 setAuthor 方法。
methods: {
setAuthor: function () {
this.$store.state.author = this.inpuTxt
}
}
在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递。
七、官方推荐的修改状态的方式
上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author,但是 vue
官方推荐使用下面的方法:
首先在 store.js
中定义一个方法 newAuthor,其中第一个参数 state
就是 $store.state
,第二个参数 msg 需要另外传入,然后修改 header.vue 中的 setAuthor 方法。
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记