一、概念

Vuex，专门为 Vue 应用提供的状态管理模式。我们也称之为“状态机“。

1、状态

状态，指的就是“数据”。因此，Vuex 就是专门用来管理项目中的公共数据。

2、工作原理

状态机的原理，就是在项目中创建了一个数据仓库，我们可以将项目中所有的公共数据都保存在数据仓库。这样处理后，项目中所有的组件想要使用公共数据时，都可以直接从仓库中获取。

3、什么时候需要用vuex？

  • 当一个组件需要多次派发事件时。例如购物车数量加减。
  • 跨组件共享数据、跨页面共享数据。例如订单状态更新。
  • 需要持久化的数据。例如登录后用户的信息。

  • 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。

    二、五大核心属性

    1. export default new Vuex.Store({
    2.   state: {
    3.   },
    4.   getters: {
    5.   },
    6.   mutations: {
    7.   },
    8.   actions: {
    9.   },
    10.   modules: {
    11.   }
    12. })

    1、state

    state，状态。用来保存项目中所有的公共数据。
    基础语法：

    1. export default new Vuex.Store({
    2.   state: {
    3.       数据名: 数据值,
    4.       数据名: 数据值,
    5.       // ...
    6.   }
    7. })

    2、getters

    getters，用来设置通过对 state 的计算，得到的新数据。可以理解为仓库中的计算属性。
    基础语法：

    1. export default new Vuex.Store({
    2.   getters: {
    3.       数据名(state) {
    4.           // 对 state 进行操作得到新数据(不会改变 state)
    5.           return 新数据值;
    6.       }
    7.   }
    8. })

    3、mutations

    mutations，用来设置修改 state 的方法。所有对 state 的修改操作，都必须通过 mutations 中的方法来实现。
    基础语法：

    1. export default new Vuex.Store({
    2.   mutations: {
    3.       方法名(state, payload) {
    4.           state.数据名 = 新数据值;
    5.           state.数据名 = payload;
    6.       }
    7.   }
    8. })

    说明：payload 是一个任意形参名，用来接收外部调用时传递的数据。

    4、actions

    actions，用来设置所有的异步方法。
    基础语法：

    1. export default new Vuex.Store({
    2.   actions: {
    3.       方法名(context, payload) {
    4.           // 发送异步请求,例如 axios 请求
    5.       }
    6.   }
    7. })

    说明：

  • context：用来获取当前整个仓库对象；

  • payload：用来接收外部调用方法时传递的数据。

    5、modules

    modules，仓库模块化可以将仓库划分成多个模块，将不同类型的数据放到不同的模块进行管理。
    基础语法：
    1. export default new Vuex.Store({
    2.   modules: {
    3.       模块名: 模块对象,
    4.       模块名: 模块对象
    5.       // ...
    6.   }
    7. })