基于 redux-tooltik 的状态管理插件

ANIYAJS-PLUGIN-TOOLTIK

官方文档

版本

• 稳定版：

安装

$ npm i @aniyajs/plugin-tooltik

启用 ✨

// config.ts
{
  // ...
  toolTik: true, // 默认为false，true为开启
  aniyaPlugins: ['@aniyajs/plugin-tooltik'],
}

// 项目中目录结构
// src目录下 models 目录、src/pages 目录下 model.[ts/js] 文件

属性

• name ：命名空间
• 其余特性查看：https://github.com/reduxjs/redux-toolkit

栗子 🌰

export interface SettingType {
  theme: string
  layout: string
  contentWidth: string
  fixedHeader: boolean
  fixSiderbar: boolean
  colorWeak: boolean
  hideHintAlert: boolean
  hideCopyButton: boolean
  colorPrimary: string
}

export interface GlobalState {
  setting: Partial<SettingType>
}

export interface GlobalModel {
  name: 'global'
  initialState: GlobalState
  reducers: {
    save: (state: GlobalState, _: { payload: any }) => void
  }
}

const globalModel: GlobalModel = {
  name: 'global',
  initialState: {
    setting: {
      theme: 'light',
      layout: 'side',
      contentWidth: 'Fluid',
      fixedHeader: false,
      fixSiderbar: false,
      colorWeak: false,
      hideHintAlert: false,
      hideCopyButton: false,
      colorPrimary: '#1890ff',
    },
  },
  reducers: {
    save: (state, { payload }) => {
      state = Object.assign(state, {
        ...payload,
      })
    },
  },
}

export default globalModel;