浅谈vuex面试（vue2.x）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

定义:

是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。是采用集中式存储管理应用的所有组件的状态,通俗说就是一个仓库，用于存储状态。

状态管理模式:

状态(state)，是指驱动应用的数据源 视图(view)，会将声明方式将状态映射到视图 操作(actions)，是响应在视图上的用户输入导致的状态变化

属性:

State、 Getter、Mutation 、Action、 Module

vuex的State特性

state里面存放的数据是响应式的，Vue组件会从store中读取数据，如果store中的数据发生改变，依赖这个数据的组件也会发生更新，可以通过

this.$store.state.状态名

来获取 也可以通过mapState辅助函数把全局的 state 和 getters 映射到当前组件的 computed 计算属性中来获取 用法:

import { mapState } from 'vuex'

export default {
  computed: mapState({
    状态名: state => state.状态值
  })
}

vuex的Getter特性

getters 可以对state进行计算操作，相当于Store的计算属性

vuex的Mutation特性

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。在Vuex 中的 mutation 和事件类似:每一个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。而这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数 通过

store.commit('属性名', '属性值')

动态改变store中的状态值

vuex的Action特性

Action 和 Mutation，但是Action 提交的是 mutation，而不是直接变更状态，Action可以提交异步操作，而Mutation提交的是同步 通过

store.dispatch('属性名')

提交

优点:

一、可维护性提高

二、可读性增强

三、可以降低耦合性，更适合组件化

四、避免大项目中， 数据不小心的污染

缺点：

刷新浏览器时，vuex中的state会重新变为初始状态