面试题——请你描述一下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

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,

       })

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)
    })
  }

}

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

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

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