手写vuex4源码(二)组件install逻辑

一、分析vuex

从vuex使用角度分析

  • vuex是一个对象
  • 对象上有install方法,在app.use(store)时调用
  • 可以创建多个store实例,工厂模式
createApp(App).use(store,'my').mount('#app')
  • 对象上有createStore和useStore方法
  • vuex实现挂载到全局和组件内访问(inject获取 和$store获取)

二、创建vuex插件

// 创建容器,返回一个store 工厂模式
class Store {
    constructor(options) {
     
    }
    install(app, injectKey) { //createApp.use(store)
    }
}
export function createStore() {}

export function useStore() {}

三、模块设计

  • install:插件安装逻辑,在createApp.use(store)时调用
  • store类:容器初始化
  • createStore和useStore:提供给组件使用

1、install

install方法在createApp.use(store)时调用
全局暴露一个变量:store的实例
提供一个默认的实例,如果传入则采用传入的
同时实现在组件中使用$store

 install(app, injectKey) { //createApp.use(store)
        // console.log(app,injectKey)
        // 把store提供出去,全局暴露一个变量:store的实例

        // app是一个对象,相当于vue2的实例,vue3没有实例
        // 给根app增加一个_provide,子组件会去向上查找
        app.provide(injectKey || storeKey, this)
        // vue.prototype.$store 实现在组件中使用$store
        app.config.globalProperties.$store = this;
    }

2、createStore

export function createStore(options) {
    return new Store(options)
}

3、useStore

// 不需要app.inject,vue内部已经将这些api导出来了
export function useStore(injectKey = storeKey) {
    return inject(injectKey)
}
 const store = useStore();
 console.log(store)

四、测试使用效果

class Store {
    constructor(options) {
        this.a = 100
    }
    ...
}

手写vuex4源码(二)组件install逻辑_第1张图片

初始vuex/index.js文件

import { inject } from "vue"

// 创建容器,返回一个store 工厂模式
const storeKey = 'store'
class Store {
    constructor(options) {
    }
    install(app, injectKey) { //createApp.use(store)
        // console.log(app,injectKey)
        // 把store提供出去,全局暴露一个变量:store的实例

        // app是一个对象,相当于vue2的实例,vue3没有实例
        // 给根app增加一个_provide,子组件会去向上查找
        app.provide(injectKey || storeKey, this)
        // vue.prototype.$store 实现在组建中使用$store
        app.config.globalProperties.$store = this;
    }
}
export function createStore(options) {
    return new Store(options)
}

// 不需要app,vue内部已经将这些api导出来了
export function useStore(injectKey = storeKey) {
    return inject(injectKey)
}

你可能感兴趣的:(手写vuex4.x源码,javascript,vue.js,前端)