最后
前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
cnpm run dev
然后会自动在默认浏览器里打开localhost:8080
,里面是系统默认配置的vue版helloworld,大概是这样的:
显示这个页面,说明已经创建项目成功啦~
暂停当前的vue服务(关闭终端窗口或ctrl+c),安装vuex:
npm install vuex --save
在项目文件夹下的package.json文件就会有一个vuex的依赖:
"dependencies": {
"vue": "^2.5.11",
"vuex": "^3.6.2"
},
表示vuex安装成功,重新使用cnpm run dev
启动一下项目
我的小插曲(先记录一下):
今天安装的时候忽然出了bug,居然提示我找不到vue-cli文件,node_modules目录下的npm文件没了,于是乎,我就又安装了一遍。重点是需要那个npm文件夹,可以找朋友的npm文件复制过来
创建store文件,抽离数据
背景:
有时,我们可能在不同组件运用了同一组数据;比如商品的价格,不论是预览还是详情页,该商品的价格是一样的。如果这些组件各自维护这组数据,为保证数据的一致,一旦某个子组件需要改动数据,其他子组件都需要做同样的修改。涉及的组件数量很多时,就变得麻烦易错,且冗余度太高。这时,我们可以通过vuex来管理这组数据
不使用vuex时,数据是分开维护的
没有用vuex时,组件各自维护自己的数据,就像这样:
主页面App.vue中创建数据:
data () {
return {
products:[
{name:"陕西大苹果",price:120},
{name:"菠萝",price:12},
{name:"大西瓜",price:60},
{name:"百香果",price:20}
]
}
}
用v-bind动态传递给两个子页面product-list-one和product-list-two:
<template>
<div id="app">
<product-list-one v-bind:products="products"></product-list-one>
<product-list-two v-bind:products="products"></product-list-two>
</div>
</template>
子页面用props接收后展示:
<ul>
<li v-for="product in products" v-bind:key="product.id">
<span class="name">{{product.name}}</span>
<span class="price">¥{{product.price}}</span>
</li>
</ul>
效果:
是的,我们每个子组件都拿到了父组件传来的数据。如果我们想要修改数据,需要在每个组件中添加一个修改函数saleProducts,这个案例有两个需要修改的组件,就需要添加两次这个函数:
saleProducts(){
var saleProducts = this.products.map((product)=>{
return {
name: product.name+"-onsale",
price:product.price/2
}
})
return saleProducts
}
效果:这个函数,只为了让商品价格都降一半
那可能就有小伙伴在想了,直接在父组件那边修改了数据,然后传给子组件不就好了嘛?欸~我也这么觉得。vuex将这个想法完善成一套机制,用store存储和管理数据,当组件需要这些数据时,去store里取就好了;需要统一修改数据时,也通过提交事件来操作store里的数据。子组件只管取,别的交给vuex
You just move on and I’ll do the rest.
你只管向前,剩下的交给我。
案例修改思路如下:
- 转移(剪切)主组件App.vue里的数据,删除主组件v-bind动态传递数据和子组件props接收数据的代码
- 新建一个目录存放store代码,包括数据存储、数据获取等
- 在main.js文件中引入store文件,并注册到vue实例对象中,此处命名为store
- 在子页面使用store,如果仅需要获取源数据,可以使用
this.$store.state.数据
如果在vue对象中注册时命名为x,就写成this.$x.state.数据
- 如果需要对源数据做一些过滤、计数操作,可以在getters中进行,如上面说的商品降价,因为此处只是临时降价,不修改源数据,而是拷贝一份出来修改
使用vuex时,数据存储在store中
在src目录下新建文件夹,命名store;里面新键文件,命名store.js,将数据存到这里
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
products:[
{name:"陕西大苹果",price:120},
{name:"菠萝",price:12},
{name:"大西瓜",price:60},
{name:"百香果",price:20}
]
}
}
})
在main.js中引入并注册到vue实例中:
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js'
new Vue({
//将store注册到vue实例中,命名为store
store:store,
el: '#app',
render: h => h(App)
})
在子组件中使用:
computed:{
products(){
return this.$store.state.products;
}
}
<ul>
<li v-for="product in products" v-bind:key="product.id">
<span class="name">{{product.name}}</span>
<span class="price">¥{{product.price}}</span>
</li>
</ul>
这样就可以正常使用数据products了:
Take it one step at a time.
一步一步慢慢来。
getters获取数据
源数据可以正常使用后,我们就可以在store里新增getters字段,在这里定义降价函数:
getters:{
// products里的价格都减一半,name加上星星做标记,代表这是降价一半的价格
saleProducts:(state)=>{
// map会逐一操作每个元素并返回一个新的对象,不改变源数据
var saleProducts = state.products.map((product)=>{
return {
name: "\*\*"+product.name+"\*\*",
price: product.price/2
}
})
return saleProducts
}
子组件使用降价函数:
computed:{
saleProducts(){
return this.$store.getters.saleProducts
}
}
<ul>
<li v-for="product in saleProducts" v-bind:key="product.id">
<span class="name">{{product.name}}</span>
<span class="price">¥{{product.price}}</span>
</li>
</ul>
效果:
fine,又是this又是$符号的,看起来又高级又简洁(吹牛🤥)
如果我们要真正修改数据,要怎么做呢?
mutations修改数据
摘自官网:
更改 Vuex 的 store 中的状态的唯一方法是提交mutation。
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
我们不能随意更改数据,需要使用事件来提交请求,这跟vue里子向父传值需要使用事件传值应该是相似的理念
具体操作如下:
- 在store对象里新增mutations字段,定义“价格修改函数”
- 在子组件中设置监听
- 当某事件发生时,触发处理函数,commit提交修改数据(状态)请求
在store的mutations字段中定义处理函数reducePrice:
mutations:{
reducePrice:(state)=>{
state.products.forEach((product)=>{
product.price -= 1;
})
}
}
子组件中commit提交事件请求:
methods:{
reducePrice(number){
this.$store.commit('reducePrice')
}
}
在子组件加一个按钮,绑定点击事件,每次点击按钮时将商品价格减少1
<button @click="reducePrice()">降价</button>
由于数据展示时,会经过上面设置的saleProducts函数——数值降价一半后再显示,我们点击一次按钮,展示时只减了0.5,源数据其实是减了1的,此处都展示出来,做一个对比:
<template>
<div id="product-list-one">
<h2>ProductListOne</h2>
<h3>降价一半后的数据:</h3>
<ul>
<li v-for="product in saleProducts" v-bind:key="product.id">
<span class="name">{{product.name}}</span>
<span class="price">¥{{product.price}}</span>
</li>
</ul>
<h3>源数据在此:</h3>
<ul>
<li v-for="product in products" v-bind:key="product.id">
<span class="name">{{product.name}}</span>
<span class="price">¥{{product.price}}</span>
</li>
</ul>
<button @click="reducePrice()">降价</button>
</div>
</template>
效果:
我们还可以向reduceProducts函数传入参数,比如每次点击按钮降价4元,这个参数,在store有一个专有名:playload
使用处传参:4:
<button @click="reducePrice(4)">降价</button>
mutations处接收并处理:
更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
gif#pic_center)
我们还可以向reduceProducts函数传入参数,比如每次点击按钮降价4元,这个参数,在store有一个专有名:playload
使用处传参:4:
<button @click="reducePrice(4)">降价</button>
mutations处接收并处理:
更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-vV3Im5tb-1715230560227)]