2021前端技术面试必备Vue:(四)Vuex状态管理

海军 等级 343 0 0
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 -Vuex,它的思想和React 的Redux 很像,页面中的数据和逻辑都交给了store来管理了,这样的好处就是,维护方便,单个组件代码也整洁不少。

2021前端技术面试必备Vue:(四)Vuex状态管理

到此,Vue 系列文章就结束了,Vue 全家桶已经讲完了,如果你跟着读了这前几篇文章的话,你现在就可以实操的写一个项目来体验一下Vue的魅力。Vue 使用熟练可以了的话,下一步你应该进阶更高一层了,那就是研究Vue 源码。只有清楚原理了,自己造轮子玩那才有意思,对应你的money 也提高了,lavel 也 提升了,加油吧, 小伙伴们。

Vuex

安装

npm install vuex --save

yarn add vuex


// Vuex 依赖 Promise,所有需要安装 es6-promise

npm install es6-promise --save
yarn add es6-promise

Vuex 介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
count: 0,
message: '测试信息'
},
mutations: {
},
actions: {
},
modules: {
}
})

State ------>驱动应用的数据源

1.在组件中 获取store 中的state 数据
1. 在组件中 获取store 中的state 数据

// 一般是 通过计算属性中声明属性,然后使用 this.$store.state.数据源 来获取数据的
computed: {
count () {
return store.state.count
}
}

如何获取多个state呢?

如果想获取多个state数据呢,其实可以在computed 中写多个属性 来获取state,但是当state变化时,会重新求取计算属性,并且触发更新相关联的 DOM,非常影响性能。

好在Vuex 提供了 mapState 辅助函数,减少不必要的开销

1. 首先第一步 必须引入 mapState  
import { mapState } from 'vuex'

2. 在computed 使用即可
computed: mapState({
counts: state => state.count,
//counts为自定义的属性: state参数 是stote中的state,然后直接通过state。数据源获取即可
addNumber (state) {
return this.numbers + state.count
}
})


3. 在页面 直接使用 自定义的属性

Getter

作用类似 computed,但有缓存功能。

使用场景: 当一个组件需要过滤后的state值,你可以在组件中通过filter进行过滤,那么其它组件也需要过滤后的值,你就的再 次过滤state。

​ 当使用getter 处理后,一次处理,多次使用,提高效率

export default new Vuex.Store({
state: {
count: 0,
message: '测试信息',
arr: [1, 2, 3, 4, 5, 6]
},
getters: {
filterArr: state => {
return state.arr.filter(items => items % 2 === 0)
}
}
})
mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

在组件中访问getter 值
this.$store.getters.自定义的属性

在 其它 组件访问该getters 时,值仍然时 [ 2, 4, 6 ] 过滤后的

Mutation

Mutation 是用来更改Store的状态的唯一方法。

它由 事件类型 和 回调函数构成。回调函数是用来更改state状态的,参数为state

使用mutation:
  1. 必须在 mutation中注册事件,
  2. 然后在组件中通过 store.commit(事件名) 来 触发改变state的状态
注意:
2021前端技术面试必备Vue:(四)Vuex状态管理
store.commit 参数

store.commit 接收两个参数

​ 第一个参数为: store.mutation中的事件名

​ 第二个参数为: 要传递的 载荷

mutations: {
increment (state, n) {
state.count += n
}
}


store.commit('increment', 10)


mapMutations辅助函数

mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

对象的提交方式
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}


mutations: {
increment (state, payload) {
state.count += payload.amount
}
}store.commit({
type: 'increment',
amount: 10
})
Mutation 使用技巧

在多人协作开发时,随着 mutation 的 type 增多,会维护困难。

官方推荐采用 使用 事件类型,来处理,开发效率提高。

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})


Action

Action 功能类似 Mutation,

Action 支持 异步操作
Action 提交的 mutation, 不是直接修改state状态

Action 接收参数: 与 store 实例具有相同方法和属性的 context 对象

实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
在组件中分发Action
this.$store.dispatch('xxx')
异步执行Action
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
mapActions辅助函数
Action 也支持载荷
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})

// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})

Module 模块分割

当所有状态对象都集中在个大的对象中,store维护将变得困难。这时,可以使用模块分割成多个对象,最后将对象挂载到store的modeule中,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

✨觉得不错的点赞,帮忙转发分享以下,原创不易!


✨关注微信公众号'前端自学社区' 获取更多资料

2021前端技术面试必备Vue:(四)Vuex状态管理

💥回复加群 可以加入 自学前端群💥

收藏
评论区

相关推荐

Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。 Vuex 4 正式版本现已发布。 Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
[占山为王]我是如何四步将一个微信小程序请求库改成Taro的
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
JavaScript设计模式之单例模式
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; word
[前端必知 ]HTTP or TCP/IP 基础
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; padding: 0 10px; wordspacing: 0px; wordbreak: breakword; wordwrap: break
多人协作必备技能Git
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
全栈进阶:Nginx基本功能及其原理
<div class"output_wrapper" id"output_wrapper_id" style"fontsize: 16px; color: rgb(62, 62, 62); lineheight: 1.6; wordspacing: 0px; letterspacing: 0px; fontfamily: 'Helvetica
2021前端技术面试必备Vue:(一)基础快速学习篇
由于疫情的影响,相信很多小伙伴都在家里待着。中小公司由于运营困难会出现裁员, 我们也面临着 '失业',你是否感到了焦虑.最近做了个调研: '现在的你找到工作了吗 ?<br/1.大部分的回复: 求职平台都是 ‘已回复’,然后没有下文,你遇到了吗?<br/2.各个公司对技术的要求增高<br/3.有人说开始搞副业<br/ 在我来看,这一年已经过去了四分
2021前端技术面试必备Vue:(二)组件篇
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。 当第一章基础掌握差不多了,然后再学习了组件的开发,那么你就可以开发简单的Vue项目,路由文章还没有更新,学习完Router后,就可以开发实战项目了。<section id"nice" datatool"mdnice编
2021前端技术面试必备Vue:(三)Router篇
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"padding: 0 10px; wordspacing: 0px; wordwrap: breakword; textalign: left; fontfamily: Opti
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
Webpack 打包资源篇
<section datatools"新媒体排版" dataid"13439" datastyletype"9" style"visibility: visible;"<p style"maxwidth: 100%; visibility: visible;"<br mpafromtpl"t" style"visibility
目前最全的第三方平台 授权(OAuth2.0)登录接入指南
<section id"nice" datatool"mdnice编辑器" datawebsite"https://www.mdnice.com" style"fontsize: 16px; color: black; padding: 0 10px; lineheight: 1.6; wordspacing: 0px; lettersp
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
什么是索引?Mysql目前主要的几种索引类型
一、索引MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度。打个比方,如果合理的设计且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车。索引分单列索引和组合索引。单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引。组合索引,即一个索引包含多个列。创