Vuex基础知识梳理

学习和使用Vue，必不可少的就要用到Vuex，本篇侧重梳理vuex基础知识，希望读完这篇可以给你带来收获和帮助！

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex是用来管控状态的，将所有组件的状态进行集中管理。我们可以把vuex理解为一个仓库，仓库中的货物就是各个对象，其中state是存放数据的地方，这里的数据都是响应式的。也就是说Vuex种的状态存储都是响应式的，当状态发生改变时，相应的组件引用该状态的值也会及时更新。

使用场景

Vuex一般用于中大型项目中对状态进行集中管理，如果是一些较为简单的小型应用，使用prop属性或者事件来完成父子组件之间通信，也可以使用eventBus完成兄弟组件通信，vuex更多地是用于解决跨组件通信以及作为数据管理中心集中存储和管理数据状态的。简单点说就是多个组件需要共用一个状态，说明多个视图依赖于同一状态，像这种复杂的数据传递问题，就可以使用vuex来解决。

核心概念（5种属性）

State

是唯一的数据源，和vue实例中data遵循相同规则。定义了应用状态的数据结构，可以在这里设置状态的初始值；

如何在组件中获取vuex状态？

v-model中一般通过computed来转换后在使用state的值，这样组件中的状态就与store种的状态进行关联了，当$store.state.message发生变化时都会重新计算属性，更新DOM。

<input v-model="$store.state.message">

mapState：批量获取状态，在计算属性种写多个函数。

import {mapState} from 'vuex'
computed:{
    ...mapState(['a','b'])
}

<input v-model="message">

import {mapState} from 'vuex'  
computed: {
    ...mapState(['message'])
}

以上就是使用mapState来赋值的，组件中的state的名称要和store中的同名。

Getters

store的计算属性，返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。通过store.getters.xxx来访问对应值。

<input v-model="message">

computed: {
    message: {
        get () {
            return this.$store.state.message
        }
    }
}

mapGetters：批量使用vuex的getter

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['a','b'])
    }
}

Mutation

通过提交mutation来更改store中的状态，用store.commit方法触发，必须是同步函数！

mapMutations：组件中重复使用mutation

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
        setVal:'SET_VAL'
    })
}

调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER'，10)；

Action

类似mutation，区别在于action提交的是mutation，而不是直接修改状态，action可以包含任何异步的操作。

Module

如果项目比较复杂，所有状态集中在一起会很庞大臃肿，不好管理。此时就可以将store分割成模块，使用module来划分，将相似的内容存储在一个模块中去统一管理。

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 的状态

vuex数据传递过程

vuex

从上图我们可以看出只能在mutations里修改state，actions不能直接修改state。

整个流程分为4步：

用户行为触发actions；
actions提交到mutations；
mutations操作state；
页面根据state的改变而改变；

如果暂时看不懂这个图也不怕，可以先在脑中形成一个大概的流程，等到学完之后多用两次再回过头看，会发现大有收获！

Mutation和action区别

Mutation	Action
直接修改状态	提交的是mutation，不是直接修改状态
只能是同步操作	可以包含任意异步操作
dispatch提交，第一个参数是state	commit提交，第一个参数是context，其中包含 state / rootState / commit / dispatch / getters / rootGetters

注意事项

从vuex中获取到的数据，不能直接修改，需要浅拷贝一份再进行修改，否则会报错。

Vuex只是做了暂时的数据状态共享，在页面刷新后数据会消失，所以一般需要配合sessionStorage和localStorage存储数据实现一些效果。之前在项目中有借助插件vuex-persist和vuex-along来解决，这两插件的原理也是将数据存储到localStorage，只是直接调用已经封装好的方法而不需要手动存取了，更加便捷。

常见面试题

找到一篇很全的vuex面试题汇总，需要的去看这篇：juejin.cn/post/684490…