Web前端最新听说你也想vuex入门，快来瞅瞅吧~走过路过不要错过啦~，web前端开发怎样学

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

{{product.name}}

￥{{product.price}}

效果：

是的，我们每个子组件都拿到了父组件传来的数据。如果我们想要修改数据，需要在每个组件中添加一个修改函数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.

你只管向前，剩下的交给我。

案例修改思路如下：

1. 转移（剪切）主组件App.vue里的数据，删除主组件v-bind动态传递数据和子组件props接收数据的代码

2. 新建一个目录存放store代码，包括数据存储、数据获取等

3. 在main.js文件中引入store文件，并注册到vue实例对象中，此处命名为store

4. 在子页面使用store，如果仅需要获取源数据，可以使用this.$store.state.数据

如果在vue对象中注册时命名为x，就写成`this.$x.state.数据`

5. 如果需要对源数据做一些过滤、计数操作，可以在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;

}

}

• {{product.name}}

  ￥{{product.price}}

  这样就可以正常使用数据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

  }

  }

• {{product.name}}

  ￥{{product.price}}

  效果：

  

  fine，又是this又是$符号的，看起来又高级又简洁（吹牛🤥）

  如果我们要真正修改数据，要怎么做呢？

  ---

  mutations修改数据

  =============

  摘自官网：

  更改 Vuex 的 store 中的状态的唯一方法是提交mutation。

  Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

  我们不能随意更改数据，需要使用事件来提交请求，这跟vue里子向父传值需要使用事件传值应该是相似的理念

  具体操作如下：

  1. 在store对象里新增mutations字段，定义“价格修改函数”

  2. 在子组件中设置监听

  3. 当某事件发生时，触发处理函数，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()”>降价

  由于数据展示时，会经过上面设置的saleProducts函数——数值降价一半后再显示，我们点击一次按钮，展示时只减了0.5，源数据其实是减了1的，此处都展示出来，做一个对比：

  ProductListOne

  降价一半后的数据：

• {{product.name}}

  ￥{{product.price}}

  源数据在此：

• {{product.name}}

  ￥{{product.price}}

  <button @click=“reducePrice()”>降价

  效果：

  

  我们还可以向reduceProducts函数传入参数，比如每次点击按钮降价4元，这个参数，在store有一个专有名：playload

  使用处传参：4：

  <button @click=“reducePrice(4)”>降价

  mutations处接收并处理：

  mutations:{

  reducePrice:(state,playload)=>{

  state.products.forEach((product)=>{

  product.price -= playload;

  })

  }

  }

  效果：

  

  mutations中只能定义同步函数，不允许异步操作，异步操作由actions设置

  ---

  actions设置异步

  ===========

  摘自官网：

  Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。

  • Action 可以包含任意异步操作

  使用起来还是类似的操作步骤：

  1. 在store对象中新增actions字段，写异步代码，

  2. 子组件处dispatch

  3. 同样可以传参，用playload接收

  store中新增actions字段，定义异步操作reducePrice：

  actions:{

  reducePrice:(context,playload)=>{

  setTimeout(function(){

  context.commit(“reducePrice”,playload)

  },3000)

  }

  }

  子组件处使用：

  methods:{

  reducePrice(number){

  this.$store.dispatch(“reducePrice”,number)

  }

  }

  效果：点击按钮3秒后，商品价格减4

  

  ---

  跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

  也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

  面试准备

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

  (https://i-blog.csdnimg.cn/blog_migrate/1edb11ab892b677674d18f34966f241a.gif#pic_center)

  ---

  跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

  也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

  面试准备

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。