Util related tool methods

  1. Partial method that returns a function that preserves only parameters in the closure environment.
export function partial (fn, arg) {
  return function () {
    return fn(arg)
  }
}
Copy the code

Related Parameters

  1. Store: store instance
  2. State: The state object of the root module (this._modules.root.state)
  3. Hot: Boolean value used to control thermal overloading

ResetStoreVM interpretation

ResetStoreVM initializes the STORE’S VM, which is responsible for responsiveness (also registering _wrappedGetters as a calculated property).

function resetStoreVM(store, state, hot) {
  // Store the VM
  const oldVm = store._vm
  // Define the instance's getters object to store the getter
  store.getters = {}
  // Reset the local getters cache
  store._makeLocalGettersCache = Object.create(null)
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  
  / / traverse wrappedGetters
  forEachValue(wrappedGetters, (fn, key) = > {
    // If you use the partial function, you will save the closure of oldVm.
    // A function that returns only the parameters in the closure environment. Use computed to take advantage of its lazy caching mechanism.
    computed[key] = partial(fn, store)
    
    // Define the getters names in wrappedGetters to an object named store.getters.
    // This allows us to access it via property form (e.g. Store.getters.evenorodd).
    Object.defineProperty(store.getters, key, {
      get: () = > store._vm[key],
      enumerable: true})})// Before creating a Vue instance, set vue.config. silent = true to prevent the user from adding some snappiness
  // Global mixins with logs and warnings. After the creation is complete, set it back to the original value.
  const silent = Vue.config.silent
  Vue.config.silent = true
  store._vm = new Vue({
    data: {
      $$state: state // Use Vue instances to store state trees
    },
    
    // Treat the computed variable defined as a computed property of vue to implement the return value of the getter based on its dependencies
    // Is cached and recalculated only if its dependencies change.
    
    // Attributes in computed are added to store._vm, which is why the store
    // The reason why the get function that sets the property returns store._vm[key] when defining the property
    computed
  })
  
  Vue.config.silent = silent

  // Determine whether strict mode is enabled
  if (store.strict) {
    enableStrictMode(store)
  }

  if (oldVm) {
    if (hot) {
      // Send changes to all subscribed observers to force getter reevaluation for hot overloading.
      store._withCommit(() = > {
        oldVm._data.$$state = null})}// Destroy the old instance
    Vue.nextTick(() = > oldVm.$destroy())
  }
}
Copy the code

The enableStrictMode and _withCommit methods have been introduced in my last article.

conclusion

The source code for resetStoreVM is not complicated, it is mainly the VM that initializes the store instance. The only difficulty might be getting getters to cache it as part of Vue’s responsive system when accessed via properties. To this end, I would like to make two suggestions:

  1. Read vuEX official documents carefully and know how to use VUEX.

  2. Read the source code for computed in Vue