【Vuex 源码学习】第九篇 - Vuex 响应式数据和缓存的实现

export class Store {  constructor(options) {    // 获取 options 选项中的 state 对象    const state = options.state;    // 获取 options 选项中的 getters 对象：内部包含多个方法    const getters = options.getters;        // 声明 store 实例中的 getters 对象    this.getters = {};    // 将 options.getters 中的方法定义到计算属性中    const computed = {}
    // 页面通过“{{this.$store.getters.getPrice}}”取值，取的是 getters 对象中的属性    // 所以，需要将将用户传入的 options.getters 属性中的方法,转变成为 store 实例中的 getters 对象上对应的属性    Object.keys(getters).forEach(key => {      // 将 options.getters 中定义的方法，放入计算属性 computed 中，即定义在 Vue 的实例 _vm 上      computed[key] = () => {        return getters[key](this.state)      }
      // 将 options.getters 中定义的方法，绑定到 store 实例中的 getters 对象      Object.defineProperty(this.getters, key, {        // 旧：// 取值操作时，执行 options 中对应的 getters 方法（添加computed后废弃，使用逻辑）        // get: () => options.getters[key](this.state)        // 新：取值操作时,执行计算属性逻辑        get: () => this._vm[key]      })    });
    // 响应式数据:new Vue({data})    this._vm = new Vue({      data: {        // 在 data 中，默认不会将以$开头的属性挂载到 vm 上        $$state: state // $$state 对象将通过 defineProperty 进行属性劫持      },      computed // 将 options.getters 定义到 computed 实现数据缓存    })  }

// src/vuex/store.js#resetStoreVM
/** * 重置 Store 容器对象的 vm 实例 * @param {*} store store实例，包含 _wrappedGetters 即全部的 getter 方法； * @param {*} state 根状态，在状态安装完成后包含全部模块状态； */function resetStoreVM(store, state) {  const computed = {}; // 定义 computed 计算属性  store.getters = {};  // 定义 store 容器实例中的 getters  // 遍历 _wrappedGetters 构建 computed 对象并进行数据代理  forEachValue(store._wrappedGetters, (fn, key) => {    // 构建 computed 对象，后面借助 Vue 计算属性实现数据缓存    computed[key] = () => {      return fn();    }    // 数据代理：将 getter 的取值代理到 vm 实例上，到计算数据取值    Object.defineProperty(store.getters, key, {      get: () => store._vm[key]    });  })  // 使用 state 根状态 和 computed 创建 vm 实例，成为响应式数据  store._vm = new Vue({    // 借助 data 使根状态 state 成为响应式数据    data: {      $$state: state    },    // 借助 computed 计算属性实现数据缓存    computed   });}

export class Store {  constructor(options) {    const state = options.state;    this._actions = {};    this._mutations = {};    this._wrappedGetters = {};
    // 1,模块收集：options 格式化 -> Vuex 模块树    this._modules = new ModuleCollection(options);    console.log("格式化后的模块树对象", this._modules);        // 2,模块安装：    installModule(this, state, [], this._modules.root);        // 3,将 state 状态、getters 定义在当前的 vm 实例上    resetStoreVM(this, state);  }  // 对外提供属性访问器：当访问 state 时，实际是访问 _vm._data.$$state  get state() {     return this._vm._data.$$state  }}

// src/App.vue
<template>  <div id="app">    商品数量: {{this.$store.state.num}} 个<br>    商品单价: 10 元<br>    订单金额: {{this.$store.getters.getPrice}} 元<br>    <button @click="$store.commit('changeNum',5)">同步更新：数量+5</button>    <button @click="$store.dispatch('changeNum',-5)">异步更新：数量-5</button>  </div></template>

解构使用{ commit }, 也有可能在页面使用 $store.commit，   *    所以，在实际执行时，this 是不确定的，{ commit } 写法 this 为空，   *    使用箭头函数：确保 this 指向 store 实例；   * @param {*} type mutation 方法名   * @param {*} payload 载荷：值或对象   */  commit = (type, payload) => {    // 旧：执行 mutations 对象中对应的方法，并传入 payload 执行    // this.mutations[type](payload)    // 新：不再去 mutations 对象中查找，直接在 _mutations 中找到 type 对应的数组，依次执行    this._mutations[type].forEach(mutation=>mutation.call(this, payload))  }  /**   * 通过 type 找到 store 实例的 actions 对象中对应的方法，并执行   *    用户可能会解构使用{ dispatch }, 也有可能在页面使用 $store.dispatch,   *    所以，在实际执行时，this 是不确定的，{ dispatch } 写法 this 为空，   *    使用箭头函数：确保 this 指向 store 实例；   * @param {*} type action 方法名   * @param {*} payload 载荷：值或对象   */  dispatch = (type, payload) => {    // 旧：执行 actions 对象中对应的方法，并传入 payload 执行    // this.actions[type](payload)    // 新：不再去 actions 对象中查找，直接在 _actions 中找到 type 对应的数组，依次执行    this._actions[type].forEach(action=>action.call(this, payload))  }}