Web前端最全一文让你彻底搞懂 vuex，满满的干货，web前端页面怎么写

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

//返回 count 的 2 倍数据

countDouble(state){

return state.count*2

}

}

})

//组件中引用

获取countDouble：{{ $store.getters.countDouble }}

//运行结果

获取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：{{ $store.getters.countDoubleT }}

//运行结果

获取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 }}

3》调用模块内的 mutations 中的方法，如何调用呢？

$store.commit(‘aChangeName’)

调取模块内的 mutations 中的方法，与之前是一模一样的，程序会先从第一层 store 中查找方法，找不到方法时会继续去模块中查找。

4》调用模块内的 getters 内方法

$store.getters.getName

需要注意的是，getters 中方法都是对 state 中数据变异，如果模块的 getters 方法需要根 store 中的 state 呢？

getName(state，getters , rootState){

// state 表示当前模块的 state

// getters表示当前模块的getters

//rootState 表示根 store 内的state

}

5》模块内的 actions 中的方法，使用 commit 调用 mutations 中方法时，只能调用本模块内的 mutations 方法，不能调用外层的。

四、Vuex 数据响应原理

---

Vuex 的 store 中的 state 是响应式的，当 state 中数据发生改变时，vue 组件会自动更新。这就要求我们必须遵守一些vuex对应的规则：

提前在 store 中初始化好所需的属性。

说人话，就是必须在state中定义的属性才能做到响应式，如果是后加或删除的，无法做到响应式。

举个栗子：

mutations:{

changeName(state){

state.info.name = ‘爱学习的前端人’

},

addAdrs(state){

state.info[‘address’] = “陕西西安”

},

}

{{this.$store.state.info}}

<button @click=“$store.commit(‘changeName’)”>修改姓名

<button @click=“$store.commit(‘addAdrs’)”>增加地址

此时点击修改姓名的时候，可以做到响应式，而点击“增加地址”按钮时，页面没有任何反应，但是在开发者模式中可以看到数据有变化。

我们要响应式，该如何实现呢？

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总