⚡ 30 秒速记

• state 保存共享数据，getters 表达派生结果
• mutations 同步修改，actions 编排异步流程
• commit 与 dispatch 职责不同
• 模块按领域组织，命名空间避免动作冲突
• 局部状态留在组件，减少隐式全局依赖

Vuex 给共享状态规定了一条清楚的读写路径，让多个组件不用彼此找实例改数据。 基础数据在状态里，展示推导交给获取器，同步变更通过提交操作执行，异步请求则由动作编排后再提交结果。模块帮助按业务领域拆分，但不必为了目录整齐把每个字段单独拆开。组件内部临时状态仍可以本地管理，集中存储只承担确实需要共享和协调的部分。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/

一、初始vuex

1.1 vuex是什么

• vuex
  

  就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用

  • 父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护

1.2 vuex中有什么

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象

• state：存储状态。也就是变量；
• getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
• mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
• actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
• modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()