pinia 实战IM----注册TIM-plugin插件

目录

初始化TIM实例

定义参数类型

扩展pinia插件

添加新的属性

添加新的选项

标注插件类型 

为新的定义选项添加类型

为新的 state 添加类型

初始化pinia-TIM插件

扩展 pinia属性 与 选项

 仓库中使用

pina中注册

---

初始化TIM实例

import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
import { ChartDefineStoreOptions } from './type';

export default class TIMCore {
    constructor(props: ChartDefineStoreOptions) {
        this.initTimSdk(props.SDKAppID)
    }
    private initTimSdk(SDKAppID: number) {
        let options = {
            SDKAppID,// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
        };
        // 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
        let tim = TIM.create(options); // SDK 实例通常用 tim 表示

        // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明</a>
        tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
        // tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用

        // 注册腾讯云即时通信 IM 上传插件
        tim.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin })
    }
}

定义参数类型

export interface ChartDefineStoreOptions {
    SDKAppID: number
}

扩展pinia插件

添加新的属性

插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。

import { createPinia } from 'pinia'

// 创建的每个 store 中都会添加一个名为 `secret` 的属性。
// 在安装此插件后，插件可以保存在不同的文件中
function SecretPiniaPlugin() {
  return { secret: 'the cake is a lie' }
}

const pinia = createPinia()
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin)

// 在另一个文件中
const store = useStore()
store.secret // 'the cake is a lie'

添加新的选项

在定义 store 时，可以创建新的选项，以便在插件中使用它们。例如，你可以创建一个 debounce 选项，允许你让任何 action 实现防抖。

defineStore('search', {
  actions: {
    searchContacts() {
      // ...
    },
  },

  // 这将在后面被一个插件读取
  debounce: {
    // 让 action searchContacts 防抖 300ms
    searchContacts: 300,
  },
})

注意，在使用 setup 语法时，自定义选项作为第 3 个参数传递：

defineStore(
  'search',
  () => {
    // ...
  },
  {
    // 这将在后面被一个插件读取
    debounce: {
      // 让 action searchContacts 防抖 300ms
      searchContacts: 300,
    },
  }
)

然后，该插件可以读取该选项来包装 action，并替换原始 action：

// 使用任意防抖库
import debounce from 'lodash/debounce'

pinia.use(({ options, store }) => {
  if (options.debounce) {
    // 我们正在用新的 action 来覆盖这些 action
    return Object.keys(options.debounce).reduce((debouncedActions, action) => {
      debouncedActions[action] = debounce(
        store[action],
        options.debounce[action]
      )
      return debouncedActions
    }, {})
  }
})

标注插件类型 

一个 Pinia 插件可按如下方式实现类型标注：

import { PiniaPluginContext } from 'pinia'

export function myPiniaPlugin(context: PiniaPluginContext) {
  // ...
}

为新的定义选项添加类型

当为 defineStore() 创建新选项时，你应该扩展 DefineStoreOptionsBase。与 PiniaCustomProperties 不同的是，它只暴露了两个泛型：State 和 Store 类型，允许你限制定义选项的可用类型。例如，你可以使用 action 的名称：

import 'pinia'

declare module 'pinia' {
  export interface DefineStoreOptionsBase<S, Store> {
    // 任意 action 都允许定义一个防抖的毫秒数
    debounce?: Partial<Record<keyof StoreActions<Store>, number>>
  }
}

为新的 state 添加类型

当添加新的 state 属性(包括 store 和 store.$state )时，你需要将类型添加到 PiniaCustomStateProperties 中。与 PiniaCustomProperties 不同的是，它只接收 State 泛型：

import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomStateProperties<S> {
    hello: string
  }
}

初始化pinia-TIM插件

/**
 * 首先我们需要在插件里面
 * 完成IM sdk的初始化
 * 插件拥有登陆功能
 * 插件拥有收发功能
 * 并且插件可以返回或者在我们pinia模块里面
 * 注册一个tim的一个实例
 */

import { PiniaPluginContext } from "pinia";
import TIMCore from "./TIM-core";
export default (context: PiniaPluginContext) => {
    // 扩展pinia options选项 && pina属性
    // 如果有这个配置说明该模块需要使用TIM相关的功能
    if (context.options.TIMoption) {
        const timeCore = new TIMCore(context.options.TIMoption())
        context.store.timeCore = timeCore
    }
}

扩展 pinia属性 与 选项

import 'pinia'
import TIMCore from './store/plugin/TIM-plugin/TIM-core';
import { ChartDefineStoreOptions } from "./store/plugin/TIM-plugin/type";
//扩展 pinia属性 与 选项
declare module 'pinia' {
    export interface DefineStoreOptionsBase<S, Store> {
        //TIM初始化参数
        TIMoption?: () => ChartDefineStoreOptions
    }
    declare module 'pinia' {
        export interface PiniaCustomStateProperties<S> {
            timeCore: TIMCore
        }
    }

}

 仓库中使用

import { defineStore } from "pinia";
export const useTIMStore = defineStore('chat', {
    TIMoption() {
        return {
            SDKAppID: 1400793953
        }
    }
})

pina中注册

import { createPinia } from 'pinia'
import { Persistence } from "./plugin/Persistence.js";
import TIMplugin from "./plugin/TIM-plugin";
const pinia = createPinia()
pinia.use(Persistence)
pinia.use(TIMplugin)
export default pinia