@aniyajs/plugin-tooltik/README.md

基于redux-tooltik封装的状态管理插件服务于aniyajs自动化脚手架

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

[ANIYAJS-PLUGIN-TOOLTIK](https://gitee.com/aniyajs/aniyajs-plugin-tooltik)

**[官方文档](https://aniyajs.cn/aniyajs/plugin#aniyajstooltik)**

### 版本

- 稳定版：[![npm package](https://img.shields.io/npm/v/@aniyajs/plugin-tooltik.svg?style=flat-square)](https://www.npmjs.com/package/@aniyajs/tools) [![NPM downloads](http://img.shields.io/npm/dm/@aniyajs/plugin-tooltik.svg?style=flat)](https://npmjs.org/package/@aniyajs/tools)

### 安装

```bash
$ npm i @aniyajs/plugin-tooltik
```

### 启用 ✨

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

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

### **属性**

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

### **栗子 🌰**

```typescript
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;
```