vuex的实现原理

vuex的基本实现原理

Vuex的视图更新原理主要是基于响应式数据和发布订阅模式实现的。

• 在Vuex中，所有的状态都被存储在一个单一的状态树中，这个状态树是响应式的，当状态发生变化时，所有依赖这个状态的组件都会自动更新。

• Vuex中的状态更新是通过提交mutation来实现的。mutation是一个同步的操作，它接收当前的状态和一个payload参数，然后对状态进行修改。在mutation中，我们可以对状态进行任何的操作，包括赋值、删除、添加等操作。

• 当我们提交一个mutation时，Vuex会将这个mutation的类型和payload保存下来，并将其放入一个队列中。然后Vuex会遍历所有的订阅者，将这个mutation的类型和payload传递给订阅者，订阅者会根据mutation的类型和payload来更新自己的状态。

• 在Vuex中，订阅者可以是任何一个组件，当组件被创建时，它会自动订阅Vuex中的状态变化。当状态发生变化时，组件会自动更新自己的视图。

vuex的核心源码

目标：

1. 作为插件一定有install方法，可以在其中进行混入，当Vue实例化后挂载前拿到给其配置的store实例，把store放在原型上，以便全局可用；
2. 持有基本的state,保存实例化router时配置的mutations,actions对象；
3. 实现commit及dispatch等方法，可对state进行一定的修改

源码实现：

• 在这个实现中，Store类表示一个Vuex的实例，它包含了状态、mutation和订阅者。
• commit方法用于提交mutation，它会将mutation放入队列中，并遍历所有的订阅者，将mutation传递给订阅者。
• subscribe方法用于添加订阅者。
• install方法用于将Vuex安装到Vue中。
• 在Vue的beforeCreate钩子中，会将$store属性添加到Vue实例中，这样就可以在组件中访问到Vuex的状态和方法了。

class Store {
  constructor(options = {}) {
    this.state = options.state || {}
    this.mutations = options.mutations || {}
    this.subscribers = []
  }

  commit(type, payload) {
    const mutation = { type, payload }
    this.mutations[type](this.state, payload)
    this.subscribers.forEach(subscriber => subscriber(mutation, this.state))
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }
}

function install(Vue) {
  Vue.mixin({
    beforeCreate() {
      const options = this.$options
      if (options.store) {
        this.$store = options.store
      } else if (options.parent && options.parent.$store) {
        this.$store = options.parent.$store
      }
    }
  })
}

export default { Store, install }