前端技术面试之Vue状态管理

Vuex

安装

<pre class="prettyprint hljs sql" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">npm install vuex --save

yarn add vuex

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

npm install es6-promise --save
yarn add es6-promise
复制代码</pre>

Vuex 介绍

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

store.js

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

复制代码</pre>

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

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

<pre class="prettyprint hljs swift" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">1. 在组件中获取store 中的state 数据

// 一般是 通过计算属性中声明属性，然后使用  this.$store.state.数据源   来获取数据的

computed: {
count () {
return store.state.count
}
}

复制代码</pre>

如何获取多个state呢？

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

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

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">1. 首先第一步必须引入 mapState
import { mapState } from 'vuex'

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

Getter

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

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

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

<pre class="prettyprint hljs css" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">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)
}
}
})
复制代码</pre>

`mapGetters` 辅助函数

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

在组件中访问getter 值

<pre class="prettyprint hljs kotlin" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">this.$store.getters.自定义的属性

在其它组件访问该getters 时，值仍然时 [ 2, 4, 6 ] 过滤后的
复制代码</pre>

Mutation

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

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

使用mutation：

必须在 mutation中注册事件，
然后在组件中通过 store.commit(事件名) 来触发改变state的状态

注意：

image

`store.commit 参数`

store.commit 接收两个参数

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

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

store.commit('increment', 10)

复制代码</pre>

`mapMutations` 辅助函数

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

对象的提交方式

<pre class="prettyprint hljs vim" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">mutations: {
increment (state, payload) {
state.count += payload.amount
}
}

mutations: {
increment (state, payload) {
state.count += payload.amount
}
}store.commit({
type: 'increment',
amount: 10
})
复制代码</pre>

Mutation 使用技巧

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

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

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">// 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
}
}
})

复制代码</pre>

Action

Action 功能类似 Mutation，

Action 支持异步操作

Action 提交的 mutation, 不是直接修改state状态

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

实例

在组件中分发Action

异步执行Action

`mapActions` 辅助函数

Action 也支持载荷

<pre class="prettyprint hljs less" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})

// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
复制代码</pre>

Module 模块分割

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

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

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

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码</pre>

一、搜索QQ群，前端学习交流群：1093606290

二、https://jq.qq.com/?_wv=1027&k=MlDBtuEG

三、

image

前端技术面试之Vue状态管理

Vuex

安装

Vuex 介绍

store.js

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

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

如何获取多个state呢？

Getter

mapGetters 辅助函数

在组件中访问getter 值

Mutation

store.commit 参数

mapMutations 辅助函数

对象的提交方式

Mutation 使用技巧

Action

实例

在组件中分发Action

异步执行Action

mapActions 辅助函数

Action 也支持载荷

Module 模块分割

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

`mapGetters` 辅助函数

`store.commit 参数`

`mapMutations` 辅助函数

`mapActions` 辅助函数