【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);
  },

打印結果