手写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
    }
    ...
}

初始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)
}