【vuex源码实现】01.在vuejs 中实现一个类似vuex $store 的唯一全局变量，父组件和子组件都可以随时调用。

本文首发 https://shudong.wang/10382.html

打算实现一个vuex先从第一步开始，实现一个类似$store 的唯一全局变量，父组件和子组件都可以随时调用。
下面我们来实现

使用 $options 这个api 来获取父组件的信息

$options.parent  

当我们在子组件调用的时候，可以把我们设置的变量，挂在到this上面
下面实现一个 $stark 挂在到全局变量

  if (this.$options.stark) {
    this.$stark = this.$options.stark
  } else if (this.$options.parent && this.$options.parent.$stark) {
    this.$stark = this.$options.parent.$stark
  }

设置一个mixinjs

mixin.js

Vue.mixin({ beforeCreate: starkInit })
// shudong.wang
function starkInit() {
  const options = this.$options
  if (options.stark) {
    this.$stark = typeof options.stark === 'function' ? options.stark() : options.stark
  } else if (options.parent && options.parent.$stark) {
    this.$stark = options.parent.$stark
  }
}

用stark.js 来初始化一个工厂函数

stark.js

import applyMixin from './mixin'

export class Stark {
  constructor(options = {}) {
    this.options = options
  }
  get state() {
    return this.options.state
  }
}


export function install(_Vue) {
  applyMixin(Vue)
}

使用index.js 来生命Stark 和 install 为了 new Vue 使用

index.js

import { Stark, install } from './stark'

export default {
  Stark,
  install,
}

state.js

export const  state = {
  count: 10
}

挂在到vuejs上面

import Vue from 'vue'
import App from './App.vue'
import stark from './stark'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  stark,
}).$mount('#app')

页面调用

  created() {
    console.log('App',this.$stark);
  },

打印结果