目录
初始化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
