面试题——请你描述一下Vuex

这个也是面试的必问题目。下面我们来详细说一下

Vuex是什么？

• Vuex是为vue项目服务的状态管理模式，是一种集中式的，将所有组件的共有的状态或者数据变量集中起来管理，并以相对应的规则去控制状态变化，使得数据和状态有规律可循、可追查的一种手段。

我们在哪些时候需要用到Vuex呢？

1. 需要数据共享以及行为的拆分
2. 较为复杂的的异步逻辑，需要多个模块加持
3. 需要考虑多个组件之间的生命周期以及持久化

Vuex应用场景

1. 个人信息模块
2. 购物车模块
3. 订单计算模块

下面我们来说说他有哪些配置以及写一个小demo去加深对Vuex的理解

State

是vuex的基本数据，唯一的数据源，用来存储变量或者状态的，我们可以把任何一个组件中需要抽取出来的变量放入到state中去，

Getter

从基本数据(state)派生的数据，它相当于state的计算属性，通过Getters可以派生出一些新的状态

Mutation

提交更新数据的方法，而且它是同步的。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方

Action

用法和Mutation相似，但是它是异步的，也就是不直接变更状态，要想修改状态提交建议是在这里，因为这样的话会让数据有迹可循，方便管理

Module

模块化，能让每一个模块都有自己的状态和修改方法，使得结构非常的清晰。

下面写一个非常简单的小demo

```markdownimport Vue from 'vue'

import Vuex from 'vuex'

import getters from './getters'

import mutations from './mutations'

import actions from './actions'

Vue.use(Vuex)

const state = { count:0 } export default new Vuex.Store({

            state,

            getters,

            mutations,

            actions,

       })import Vue from 'vue'

import Vuex from 'vuex'

import getters from './getters'

import mutations from './mutations'

import actions from './actions'

Vue.use(Vuex)

const state = { count:0 } export default new Vuex.Store({

            state,

            getters,

            mutations,

            actions,

       }) ```

```markdown export default { increment({commit}){ commit('increment') }, decrement({commit}){ commit('decrement') }, incrementIfOdd({commit,state}){ if((state.count+1)%2 ===0){ commit('increment')} }, incrementAsync({commit}){ return new Promise((resolve,reject) => { setTimeout(() => { commit('increment') resolve() },500) }) }

} ```

markdown export default { increment(state){ state.count ++ }, decrement(state){ state.count-- } }

markdown export default { count (state){ return state.count } }

以上就是我个人对Vuex的理解啦