一文让你彻底搞懂 vuex，满满的干货(1)，2024年最新微信web开发教程

export default new Vuex.Store({

state:{

online:true

}

})

computed:{

status(){

return this.$store.state.online

}

}

store 中的数据发生改变时，都会重新求取计算属性，并更新相关 DOM。

2》如果需要使用多个参数时，都使用 computed 计算属性，就会使代码变的有些冗余和复杂，此时我们就可以借助 mapState 辅助函数。

//state 中数据比较多，引用到一个组件内

export default new Vuex.Store({

state:{

online:true,

per:[

{name:‘qq’,age:18}

],

role:‘管理员’

}

})

//组件内

import { mapState } from ‘vuex’

export default {

name: ‘App’,

computed: mapState({

online: state => state.online,

per: ‘per’, // 'per’就相当于 state.per

role: ‘role’ // 'role’就相当于 state.role

})

}

vuex 使用单一状态树来管理应用层级的全部状态，单一状态树能够让我们最直接的方式找到某个状态的片段，而且之后的维护和调试过程，也可以非常方便管理和维护。

3.2、getters

从 store 中获取一些 state 变异后的状态。

使用的时候一般有两种方式：

1》返回的结果只依赖于 state 中的数据

export default new Vuex.Store({

state:{

count:2,

},

getters:{

//返回 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’

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

oaW1nLmNvbS84MC92Mi1kN2M3ZWVjOWJiZGVmYjJiMjNjNzExNzgzZWM4MzIwZV9oZC5qcGc?x-oss-process=image/format,png)

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-JqJu6Z6F-1712736556408)]