vuex实现及简略解析(小结)

混入了一个

beforeCreate

的生命周期的钩子函数，使得当每个组件实例化的时候都会调用这个函数。

在

beforeCreate

中，第一次根组件通过

store

属性挂载

$store

，后面子组件调用

beforeCreate

挂载的

$store

都会向上找到父级的

$store

，这样子通过层层向上寻找，让每个组件都挂上了一个

$store

属性，而这个属性的值就是我们的

new Store({...})

的实例。如下图

通过层层向上寻找，让每个组件都挂上了一个

$store

属性

设置state响应数据

通过上面，我们已经从每个组件都通过

this.$store

来访问到我们的store的实例，下面我们就编写

state

数据，让其变成双向绑定的数据。下面我们改写

store

类

class Store {
 constructor (options) {
  let { state, getters, actions, mutations } = options // 拿到传进来的参数
  this.getters = {}
  this.mutations = {}
  this.actions = {}
  // vuex的核心就是借用vue的实例，因为vuex的数据更改回更新视图
  this._vm = new Vue({
   data: {
    state
   }
  })
 }
 // 访问state对象时候，就直接返回响应式的数据
 get state() { // Object.defineProperty get 同理
  return this._vm.state
 }
}

传进来的

state

对象，通过

new Vue({data: {state}})

的方式，让数据变成响应式的。当访问

state

对象时候，就直接返回响应式的数据，这样子在

App.vue

中就可以通过

this.$store.state.count

拿到

state

的数据啦，并且是响应式的呢。

编写mutations、actions、getters

上面我们已经设置好

state

为响应式的数据，这里我们在

store.js

里面写上

mutations、actions、getters

，如下

import Vue from 'vue'								 
 3/8   首页 上一页 1 2 3 4 5 6 下一页 尾页