### Install AutoStore Core Package

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/intro/install.md

Installs the core 'autostore' package, which provides the fundamental functionality of AutoStore. This package can be used directly by developers of frameworks like Vue.

```bash
npm install  autostore
```

```bash
yarn add autostore
```

```bash
pnpm add autostore
```

--------------------------------

### Install AutoStore using npm, yarn, or pnpm

Source: https://github.com/zhangfisher/autostore/blob/master/readme_cn.md

This section provides installation commands for the AutoStore library using different package managers. Ensure you have Node.js and a package manager installed.

```bash
npm install @autostorejs/react
yarn add @autostorejs/react
pnpm add @autostorejs/react
```

--------------------------------

### Install AutoStore React Package

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/intro/install.md

Installs the '@autostorejs/react' package, which is specifically designed for React developers. This package integrates all functionalities of the core 'autostore' package and can also be imported in a 'lite' version.

```bash
npm install  @autostorejs/react
```

```bash
yarn add @autostorejs/react
```

```bash
pnpm add @autostorejs/react
```

--------------------------------

### Control AutoStore Syncer Start and Stop (TypeScript)

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/store/sync.md

Demonstrates how to manually start and stop the synchronization process managed by AutoStoreSyncer. This allows for dynamic control over when state updates are exchanged.

```typescript
const syncer = new AutoStoreSyncer(workerStore, {
    transport: new WorkerTransport(self),
    autostart: true,
});

// 开始同步
syncer.start();

// 停止同步
syncer.stop();
```

--------------------------------

### AutoStore Initialization and Configuration in JavaScript

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/tree-select.html

Initializes AutoStore with configurable tree-select components for departments and administrators. It demonstrates setting up single and multi-select options with specific value keys and tree structures. The store's state is watched for changes and displayed.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const orgTree = { id: 1, label: '集团公司', children: [
  { id: 1, label: '研发中心', children: [
    { id: 11, label: '工程部' },
    { id: 12, label: '产品部' },
    { id: 13, label: '测试部' },
    { id: 14, label: '运维部' },
    { id: 15, label: '系统部' },
  ] },
  {
    id: 2,
    label: '营销中心',
    selected: true,
    children: [
      { id: 21, label: '销售部' },
      { id: 22, label: '市场部' },
      { id: 23, label: '客服部' },
    ],
  },
  {
    id: 3,
    label: '生产中心',
    children: [
      { id: 31, label: '生产部' },
      { id: 32, label: '采购部' },
      { id: 33, label: '仓储部' },
      { id: 34, label: '质检部' },
    ],
  },
];

const store = new AutoStore({
  depts: configurable(['产品部'], {
    label: '部门',
    widget: 'tree-select',
    multiple: true,
    valueKey: 'label',
    help: '多选',
    onlySelectLeaf: false,
    items: orgTree,
  }),
  deptIds: configurable([], {
    label: '部门编码',
    widget: 'tree-select',
    multiple: true,
    valueKey: 'id',
    help: '多选',
    onlySelectLeaf: false,
    items: orgTree,
  }),
  admin: configurable('', {
    label: '部门',
    widget: 'tree-select',
    valueKey: 'label',
    help: '单选且只能选择叶子节点',
    onlySelectLeaf: true,
    items: orgTree,
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();

```

--------------------------------

### Initialize AutoStore Instance

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/store/batchUpdate.md

This code snippet demonstrates the basic initialization of an AutoStore instance with initial state properties. It serves as a starting point for using the AutoStore library.

```typescript
const sore = new AutoStore({
    name:"Fisher"
    age:18
})
```

--------------------------------

### Combine Widget Configuration Example

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/form/guide/fields/combine.md

An example demonstrating how to configure the Combine widget for setting padding. It shows the use of `toState` for merging padding values and `toInput` for parsing and assigning individual padding directions (top, right, bottom, left) from a combined value.

```typescript
configurable('10px 5px', {
    widget: 'combine',
    label: '内边距',
    toState: (values) => toPadding(values), // [!code ++]
    required: true,
    children: [
        {
            name: 'top',
            label: '上',
            widget: 'range',
            width: '50%',
            toInput: (value) => parsePadding(value).top, // [!code ++]
        },
        {
            name: 'right',
            label: '右',
            widget: 'range',
            width: '50%',
            toInput: (value) => parsePadding(value).right, // [!code ++]
        },
        {
            name: 'bottom',
            label: '下',
            widget: 'range',
            width: '50%',
            toInput: (value) => parsePadding(value).bottom,// [!code ++]
        },
        {
            name: 'left',
            label: '左',
            widget: 'range',
            width: '50%',
            toInput: (value) => parsePadding(value).left,// [!code ++]
        },
    ],
}),
```

--------------------------------

### Managing Synchronization Lifecycle in AutoStore

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/store/sync.md

Allows manual control over synchronization by starting and stopping the sync process. The 'sync' method returns a syncer object with 'start' and 'stop' methods.

```typescript
const store1 = new AutoStore({...})
const store2 = new AutoStore({...})

const syncer = store1.sync(store2)

// stop sync
syncer.stop()

// start sync, default is auto-start
syncer.start()
```

--------------------------------

### Initialize and Use AutoStore with Configurable Fields

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/field/valid-fail.html

Demonstrates the initialization of AutoStore with multiple configurable fields, each with custom validation, labels, help text, and error handling strategies (pass, throw, ignore, throw-pass).

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  a: configurable('12345', {
    label: 'A:用户名',
    help: 'pass: 放行写入',
    onValidate: (value) => value.length >= 6,
    invalidTips: '用户名长度必须大于等于6',
    onFail: 'pass',
  }),
  b: configurable('12345', {
    label: 'B:用户名',
    help: 'throw: 触发错误',
    onValidate: (value) => value.length >= 6,
    invalidTips: '用户名长度必须大于等于6',
    onFail: 'throw',
  }),
  c: configurable('12345', {
    label: 'C:用户名',
    help: 'ignore: 忽略错误不写入',
    onValidate: (value) => value.length >= 6,
    invalidTips: '用户名长度必须大于等于6',
    onFail: 'ignore',
  }),
  d: configurable('12345', {
    label: 'D:用户名',
    help: 'throw-pass: 触发错误且写入',
    onValidate: (value) => value.length >= 6,
    invalidTips: '用户名长度必须大于等于6',
    onFail: 'throw-pass',
  }),
});
```

--------------------------------

### Starting and Stopping AutoStore Synchronization

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/store/guide/store/sync.md

Provides methods to manually control the synchronization process between two AutoStore instances. The `sync` method returns a syncer object with `stop()` and `start()` methods to manage the active synchronization.

```typescript
const store1 = new AutoStore({...})
const store2 = new AutoStore({...})

const syncer = store1.sync(store2)

// Stop synchronization
syncer.stop()

// Start synchronization (default is auto-start)
syncer.start()
```

--------------------------------

### Integrate ESLint React Plugin and Recommended Rules

Source: https://github.com/zhangfisher/autostore/blob/master/examples/storybook/README.md

This JavaScript code snippet shows how to integrate the `eslint-plugin-react` into your ESLint configuration for a React project. It sets the React version, adds the plugin, and enables its recommended rules.

```javascript
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```

--------------------------------

### Import AutoStore DevTools

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/debug/devTools.md

Import the @autostorejs/devtools package at the beginning of your project's entry file (e.g., main.ts, app.ts, index.ts). This ensures the devtools are available when your application starts.

```typescript
//main.ts | app.ts | index.ts

import `@autostorejs/devtools`
```

--------------------------------

### Examples of Using Built-in Validators

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/store/schema.md

Illustrates practical examples of using AutoStore's built-in validators like `s.number` and `s.string`. It shows how to provide a validation function and error tips either as a third argument or within an options object, demonstrating flexibility in configuration.

```typescript
s.number(100,(val)=>val>10,"价格必须大于10")
s.number(100,(val)=>val>10,{
    errorTips:"价格必须大于10",
    title:"价格",
    required:true,
    description:"产品价格",
    tags:["价格"]
})

s.string("1234",(val)=>val.length>3,"密码长度必须大于3")
s.string("1234",{
    errorTips:"密码长度必须大于3",
    title:"密码",
    required:true,
    placeholder:"请输入密码"
})

```

--------------------------------

### Basic Usage of AutoStore in React

Source: https://github.com/zhangfisher/autostore/blob/master/readme_cn.md

Demonstrates the fundamental setup of AutoStore, including creating a store with initial state and using the `useState` hook to access and update state within a React component. This requires the `@autostorejs/react` package.

```typescript
import { createStore } from '@autostorejs/react';

const { $, state,useState } = createStore({
  user: {
    firstName: 'zhang',
    lastName: 'fisher',
    fullName: (scope)=> { 
      return scope.firstName + scope.lastName;
    }
  }
});

// use in component
const Card = () => {
    const [ firstName,setFirstName ] = useState('user.firstName');
    const [ lastName,setLastName ] = useState('user.lastName');
    return <div>
      <div>FirstName:{firstName}</div>
      <div>LastName:{lastName}</div>
    </div>
}
```

--------------------------------

### AutoStore Configuration and Binding in JavaScript

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/verifycode.html

This snippet shows how to initialize AutoStore with configurable fields for email and SMS verification codes. It then binds the store to an HTML form and sets up a watcher to update a JSON viewer with the store's current state.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  mailcode: configurable('', {
    label: '邮件验证码',
    maxLength: 6,
    icon: 'mail',
    widget: 'verifycode',
  }),
  sms: configurable('', {
    label: '短信验证码',
    maxLength: 6,
    icon: 'smartphone',
    sendTips: '向我的手机发送验证码',
    template: '{timeout}秒后重新发送',
    widget: 'verifycode',
    onRequest: () => {
      alert('在此向服务发起重新发送的请求');
    },
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();
```

--------------------------------

### AutoStore Configuration and Form Binding (JavaScript)

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/tree-dropdown.html

This snippet shows how to initialize an AutoStore instance with configurable fields for selecting departments and administrators from an organizational tree. It then binds this store to an HTML form and sets up a watcher to update a JSON viewer with the store's state.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const orgTree = { id: 1, label: '集团公司', children: [
  { id: 1, label: '研发中心', children: [
    { id: 11, label: '工程部' }, { id: 12, label: '产品部' }, { id: 13, label: '测试部' }, { id: 14, label: '运维部' }, { id: 15, label: '系统部' }, 
  ] },
  { id: 2, label: '营销中心', selected: true, children: [
    { id: 21, label: '销售部' }, { id: 22, label: '市场部' }, { id: 23, label: '客服部' }, 
  ] },
  { id: 3, label: '生产中心', children: [
    { id: 31, label: '生产部' }, { id: 32, label: '采购部' }, { id: 33, label: '仓储部' }, { id: 34, label: '质检部' }, 
  ] },
]};

const store = new AutoStore({
  depts: configurable(['产品部'], {
    label: '部门',
    widget: 'tree-dropdown',
    multiple: true,
    valueKey: 'label',
    help: '多选',
    onlySelectLeaf: false,
    items: orgTree,
  }),
  deptIds: configurable([], {
    label: '部门编码',
    widget: 'tree-dropdown',
    multiple: true,
    valueKey: 'id',
    help: '多选',
    onlySelectLeaf: false,
    items: orgTree,
  }),
  admin: configurable('', {
    label: '部门',
    widget: 'tree-dropdown',
    valueKey: 'label',
    help: '单选且只能选择叶子节点',
    onlySelectLeaf: true,
    items: orgTree,
  }),
  deptPath: configurable('', {
    label: '部门路径',
    widget: 'tree-dropdown',
    valueKey: 'label',
    help: '单选且只能选择叶子节点',
    onlySelectLeaf: true,
    showAsPath: true,
    items: orgTree,
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();
```

--------------------------------

### JavaScript AutoStore Configuration and Form Binding

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/field/width.html

This snippet shows the configuration of an AutoStore instance in JavaScript, defining fields for user login (username, password, remember) and order details (price, count, total). It utilizes the `configurable` function for defining input fields and demonstrates binding the store to an HTML form element.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  user: {
    username: configurable('NAME', {
      label: '用户名',
      width: '33.33%',
      height: '100px'
    }),
    password: configurable('PASSWORD', {
      label: '密码',
      width: '33.33%',
      height: '100px'
    }),
    remember: configurable(true, {
      label: '记住密码',
      width: '33.33%',
      height: '100px'
    })
  },
  order: {
    price: configurable(100, {
      label: '价格',
      width: '50%'
    }),
    count: configurable(1, {
      label: '数量',
      width: '50%'
    }),
    total: (order) => order.price * order.count
  }
});

const form = document.querySelector('#login');
form.bind(store);
```

--------------------------------

### Configure ESLint with TypeScript Project Options

Source: https://github.com/zhangfisher/autostore/blob/master/examples/storybook/README.md

This JavaScript code snippet demonstrates how to configure ESLint in a Vite + TypeScript project to enable type-aware lint rules. It specifies the TypeScript project files and the root directory for parsing.

```javascript
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

--------------------------------

### Bind AutoStore to HTML Form and Watch State Changes

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/field/valid-fail.html

Shows how to bind an AutoStore instance to an HTML form element and set up a watcher to update a JSON viewer whenever the store's state changes. It also includes an initial update for the viewer.

```javascript
const form = document.querySelector('#form');
form.bind(store);

const updateJsonViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state, null, 2);
};

store.watch(() => {
  updateJsonViewer();
});

updateJsonViewer();
```

--------------------------------

### Configure AutoStore with Properties and Actions (JavaScript)

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/number.html

This snippet demonstrates how to instantiate and configure an AutoStore object in JavaScript. It utilizes the `configurable` function to define properties such as icon, fill, pill, clearable, and actions. The actions array includes examples of default values, click handlers, and actions with specific positions.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  icon: configurable(123, { label: '前缀图标', icon: 'email', widget: 'number', help: "icon='email'", }),
  filled: configurable(123, { label: '填充背景', filled: true, widget: 'number', help: 'filled=true',
  }),
  pill: configurable(123, { label: '椭圆边框', pill: true, widget: 'number', help: 'pill=true',
  }),
  clearable: configurable(1, { label: '清除按钮', clearable: true, widget: 'number', help: 'clearable=true',
  }),
  actions: configurable(100, {
    label: '动作',
    widget: 'number',
    actions: [
      {
        label: '默认值',
        onClick: (value, { update }) => {
          update(100);
        },
      },
      {
        label: '测试',
        icon: 'email',
        onClick: (value, { update }) => {
          alert('点击了');
        },
      },
      {
        label: '测试',
        icon: 'email',
        pos: 'before',
        onClick: (value, { action, update }) => {
          alert('点击了' + action.label);
        },
      },
    ],
  }),
});

const form = document.querySelector('#form');
form.bind(store);
```

--------------------------------

### Basic AutoStore Usage with Reactive State

Source: https://github.com/zhangfisher/autostore/blob/master/readme.md

Demonstrates the basic setup of AutoStore using `createStore` to manage state, including nested objects and a computed property for `fullName`. It also shows how to use `useReactive` within a React component to bind to specific state properties and trigger updates.

```typescript
import { createStore } from '@autostorejs/react';

const { $, state,useReactive } = createStore({
  user: {
    firstName: 'zhang',
    lastName: 'fisher',
    fullName: (scope)=> {
      return scope.firstName + scope.lastName;
    }
  }
});

// use in component
const Card = () => {
    const [ firstName,setFirstName ] = useReactive('user.firstName');
    const [ lastName,setLastName ] = useReactive('user.lastName');
    return <div>
      <div>FirstName:{firstName}</div>
      <div>LastName:{lastName}</div>
    </div>
}
```

--------------------------------

### Configure Path Mapping for AutoStore Sync (TypeScript)

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/store/guide/store/sync.md

Demonstrates setting up `pathMap` to define custom mapping logic for synchronizing data between two AutoStore instances. It covers `toRemote` for mapping from the source store to the target store and `toLocal` for the reverse. The example highlights how to handle basic types versus objects to prevent unintended data duplication.

```typescript
const fromStore = new AutoStore({
    order: {
        a: 1,
        b: 2,
        c: 3,
    },
});
const toStore = new AutoStore({
    myorder: {},
});
fromStore.sync(toStore, {
    to: 'myorder',
    immediate: false,
    pathMap: {
        toLocal: (path: string[]) => {
            if (typeof path[0] !== 'object') {
                return [path.join('.')];
            }
        },
        toRemote: (path: string[]) => {
            return path.reduce<string[]>((result, cur) => {
                result.push(...cur.split('.'));
                return result;
            }, []);
        },
    },
});
```

```typescript
fromStore.state.order.a = 11;
fromStore.state.order.b = 12;
fromStore.state.order.c = 13;

expect(toStore.state).toEqual({
    myorder: {
        'order.a': 11,
        'order.b': 12,
        'order.c': 13,
    },
});
```

```typescript
toStore.state.myorder['order.a'] = 21;
toStore.state.myorder['order.b'] = 22;
toStore.state.myorder['order.c'] = 23;
expect(fromStore.state).toEqual({
    order: {
        a: 21,
        b: 22,
        c: 23,
    },
});
```

```typescript
fromStore.sync(toStore, {
    to: 'myorder',
    pathMap: {
        toRemote: (path: string[], value: any) => {
            return [path.join('.')];
        },
        toLocal: (path: string[], value: any) => {
            if (typeof value !== 'object') {
                return path.reduce<string[]>((result, cur) => {
                    result.push(...cur.split('.'));
                    return result;
                }, []);
            }
        },
    },
});
```

```typescript
fromStore.sync(toStore, {
    to: 'myorder',
    pathMap: {
        toRemote: (path: string[], value: any) => {
            if (typeof value !== 'object') {
                return [path.join('.')];
            }
        },
        toLocal: (path: string[], value: any) => {
            if (typeof value !== 'object') {
                return path.reduce<string[]>((result, cur) => {
                    result.push(...cur.split('.'));
                    return result;
                }, []);
            }
        },
    },
});
```

--------------------------------

### JavaScript AutoStore Form Binding and State Management

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/cascader.html

This snippet demonstrates initializing and binding an AutoStore instance to an HTML form. It includes defining various configurable fields such as cascading selectors for car models with different configurations (value keys, delimiters, dropdown behavior) and watching for state changes to update a JSON viewer. Dependencies include the AutoStore library and an HTML element with the ID 'form' and 'viewer'.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const cars = {
  label: '汽车',
  id: '0',
  children: [
    {
      label: '乘用车',
      id: '1',
      children: [
        {
          label: '轿车',
          id: '1-1',
          children: [
            { label: '紧凑型轿车', id: '1-1-1' },
            { label: '中型轿车', id: '1-1-2' },
            { label: '豪华轿车', id: '1-1-3' },
          ],
        },
        {
          label: 'SUV',
          id: '1-2',
          children: [
            { label: '小型SUV', id: '1-2-1' },
            { label: '中型SUV', id: '1-2-2' },
            { label: '大型SUV', id: '1-2-3' },
          ],
        },
        {
          label: 'MPV',
          id: '1-3',
          children: [
            { label: '家用MPV', id: '1-3-1' },
            { label: '商务MPV', id: '1-3-2' },
          ],
        },
      ],
    },
    {
      label: '商用车',
      id: '2',
      children: [
        {
          label: '客车',
          id: '2-1',
          children: [
            { label: '小型客车', id: '2-1-1' },
            { label: '中型客车', id: '2-1-2' },
            { label: '大型客车', id: '2-1-3' },
          ],
        },
        {
          label: '货车',
          id: '2-2',
          children: [
            { label: '轻型货车', id: '2-2-1' },
            { label: '重型货车', id: '2-2-2' },
          ],
        },
      ],
    },
    {
      label: '新能源车',
      id: '3',
      children: [
        {
          label: '纯电动车',
          id: '3-1',
          children: [
            { label: '微型电动车', id: '3-1-1' },
            { label: '家用电动车', id: '3-1-2' },
          ],
        },
        {
          label: '混合动力车',
          id: '3-2',
          children: [
            { label: '插电式混动', id: '3-2-1' },
            { label: '油电混动', id: '3-2-2' },
          ],
        },
      ],
    },
  ],
};

const store = new AutoStore({
  car: configurable('', {
    label: '车型',
    widget: 'cascader',
    placeholder: '选择车型',
    select: cars,
    icon: 'car',
    valueKey: 'label',
    delimiter: '/',
  }),
  car2: configurable(['商用车', '客车'], {
    label: '车型',
    widget: 'cascader',
    placeholder: '选择车型',
    select: cars,
    icon: 'car',
    help: '数组类型',
    valueKey: 'label',
  }),
  car3: configurable('', {
    label: '车型',
    widget: 'cascader',
    placeholder: '选择车型',
    select: cars,
    icon: 'car',
    help: '选择id',
    delimiter: '#',
  }),
  car4: configurable('', {
    label: '车型',
    widget: 'cascader',
    placeholder: '选择车型',
    select: cars,
    icon: 'car',
    valueKey: 'label',
    dropdown: false,
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state).replaceAll(',"car', ',<p></p>"car');
};

store.watch(refreshViewer);
refreshViewer();

```

--------------------------------

### Triggering State Read/Write Events in AutoStore

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/store/guide/store/events.md

Demonstrates how reading or writing to a state in AutoStore triggers an event on the 'operates' emitter. The event name corresponds to the state path. This example shows the basic setup of a store.

```typescript
import { createStore } from '@autostorejs/core';

const store = createStore({
    user: {
        name: 'tom',
        age: 18,
    },
});
```

--------------------------------

### Initialize and Configure AutoStore with various options

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/parts.html

This JavaScript snippet demonstrates the initialization of an AutoStore instance with several configurable properties. Each property showcases different validation and formatting options, including custom labels, help text, widget types, delimiters, templates, and character restrictions. It also shows how to bind the store to an HTML form and set up a watcher to update a JSON viewer with the store's state.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  mailcode: configurable('1234', { label: '邮件验证码',
    help: '默认4位',
    widget: 'parts',
  }),
  code: configurable('AB-CD-000', {
    label: '验证码',
    help: '指定模板',
    widget: 'parts',
    delimiter: '-',
    template: '00-00-000',
  }),
  code2: configurable('ab#123', {
    label: '验证码',
    help: '分隔符自定义',
    widget: 'parts',
    delimiter: '-#',
    template: '00#00-000',
  }),
  code3: configurable('abcdefg', {
    label: '多种分隔符字符,不包含分隔符',
    widget: 'parts',
    delimiter: '-#',
    includeDelimiter: false,
    template: '00#00-000',
  }),
  code4: configurable('0000000', {
    label: '只输入数字',
    widget: 'parts',
    delimiter: '-#',
    includeDelimiter: true,
    chars: '\[0-9\]',
    template: '00#00-000',
  }),
  code5: configurable('0000000', {
    label: '输入大写字符',
    widget: 'parts',
    delimiter: '-',
    template: '00-00-000',
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();
```

--------------------------------

### Initialize and Configure AutoStore in JavaScript

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/url.html

Demonstrates how to import AutoStore and configurable, create a new AutoStore instance with two configurable properties ('icon' and 'filled'), and set their initial values and configurations. The 'filled' property includes advanced options like prefixes, suffixes with labels and values, and separators.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  icon: configurable('www.autostore.com', {
    label: 'AutoStore',
    widget: 'url',
  }),
  filled: configurable('http://www.voerkai18n.com', {
    label: 'VoerkaI18n',
    widget: 'url',
    prefix: ['http://', 'https://'],
    suffix: [
      { label: ' in new window', value: '?_blank' },
      { label: ' in current window', value: '?_self' },
      '-',
      { label: 'blank', value: '' },
    ],
  }),
});
```

--------------------------------

### Configure and Initialize AutoStore in JavaScript

Source: https://github.com/zhangfisher/autostore/blob/master/packages/form/public/tabs.html

This snippet demonstrates how to import and use the AutoStore class to create a configurable store. It defines various properties for user information, network settings, and security, utilizing the `configurable` helper for labels, widgets, and default values. The store is then bound to an 'auto-form-tabs' HTML element.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  user: {
    name: configurable('Bob', { label: '姓名' }),
    age: configurable(25, { label: '年龄', widget: 'number' }),
    sex: configurable('male', {
      label: '性别',
      widget: 'radio',
      select: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
      ]
    }),
    country: configurable('China', {
      label: '国家',
      widget: 'select',
      select: [
        { label: '中国', value: 'China' },
        { label: '美国', value: 'America' },
        { label: '泰国', value: 'Thailand' },
        { label: '印度', value: 'India' },
        { label: '墨西哥', value: 'Mexico' },
        { label: '南非', value: 'South Africa' },
        { label: '法国', value: 'France' },
        { label: '荷兰', value: 'Netherlands' },
        { label: '德国', value: 'Germany' }
      ]
    })
  },
  network: {
    ip: configurable('192.168.1.1', { label: 'IP', widget: 'ipaddress', group: 'network' }),
    dhcp: configurable(true, { label: 'DHCP', widget: 'switch', group: 'network' }),
    subnetMask: configurable('255.255.255.0', { label: '子网掩码', widget: 'ipaddress', group: 'network' }),
    gateway: configurable('192.168.1.254', { label: '默认网关', widget: 'ipaddress', group: 'network' }),
    dns: configurable('8.8.8.8', { label: 'DNS', widget: 'ipaddress', group: 'network' })
  },
  safe: {
    password: configurable('123456', { label: '密码', widget: 'password', group: 'safe' }),
    verifycode: configurable('PASSWORD', { label: '确认密码', widget: 'verifycode', group: 'safe' })
  },
  advanced: {
    password: configurable('123456', { label: '密码', widget: 'password', group: 'advanced' }),
    verifycode: configurable('PASSWORD', { label: '确认密码', widget: 'verifycode', group: 'advanced' }),
    password2: configurable('123456', { label: '密码', widget: 'password', group: 'advanced' }),
    verifycode1: configurable('PASSWORD', { label: '确认密码', widget: 'verifycode', group: 'advanced' }),
    password4: configurable('123456', { label: '密码', widget: 'password', group: 'advanced' }),
    verifycode4: configurable('PASSWORD', { label: '确认密码', widget: 'verifycode', group: 'advanced' })
  }
});

const form = document.querySelector('auto-form-tabs');
form.bind(store);
```

--------------------------------

### Install @autostorejs/devtools for Package Managers

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/react/debug/devTools.md

Install the @autostorejs/devtools package using npm, yarn, or pnpm. This package is required to enable Redux DevTools integration with AutoStore.

```bash
npm install  @autostorejs/devtools
```

```bash
yarn add @autostorejs/devtools
```

```bash
pnpm add @autostorejs/devtools
```

--------------------------------

### Initialize and Configure AutoStore with Products and Actions (JavaScript)

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/list.html

This snippet initializes an AutoStore instance with a list of products, defining validation rules, custom rendering for list items, and interactive actions. It then binds the store to an HTML form and sets up a viewer to display the store's state, watching for changes.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  products: configurable(['电脑'], {
    label: '产品',
    onValidate: (value) => {
      return value.length > 2;
    },
    widget: 'list',
    group: 'b',
    multiple: true,
    valueKey: 'label',
    labelKey: 'label',
    invalidTips: '至少选择两个产品',
    renderItem: '<span>{label}</span><span style="color:red;">{price}</span>',
    height: '250px',
    showResults: true,
    select: [
      { id: 1, label: '手机', price: 1000, icon: 'phone' },
      { id: 2, label: '电脑', price: 2000, icon: 'laptop' },
      { id: 3, label: '手表', price: 3000, icon: 'watch' },
      { id: 4, label: '耳机', price: 4000, icon: 'headphones' },
      { id: 5, label: '鼠标', price: 5000, icon: 'mouse' },
      { id: 6, label: '键盘', price: 6000, icon: 'keyboard' },
      { id: 7, label: '鼠标垫', price: 7000, icon: 'mousepad' },
      { id: 8, label: 'U盘', price: 8000, icon: 'usb' },
      { id: 9, label: '硬盘', price: 9000, icon: 'hdd' },
      { id: 10, label: '内存', price: 10000, icon: 'memory' },
      { id: 11, label: '硬盘盒', price: 11000, icon: 'hdd-box' },
      { id: 12, label: '固态硬盘', price: 12000, icon: 'ssd' },
      { id: 13, label: '机械硬盘', price: 13000, icon: 'hdd' },
      { id: 14, label: '显卡', price: 14000, icon: 'gpu' },
      { id: 15, label: '蓝牙耳机', price: 15000, icon: 'bluetooth' },
      { id: 16, label: '电视', price: 16000, icon: 'tv' },
      { id: 17, label: '空调', price: 17000, icon: 'air-conditioner' },
      { id: 18, label: '冰箱', price: 18000, icon: 'fridge' },
      { id: 19, label: '洗衣机', price: 19000, icon: 'washing-machine' },
      { id: 20, label: '微波炉', price: 20000, icon: 'microwave-oven' },
      { id: 21, label: '电饭煲', price: 21000, icon: 'rice-cooker' },
      { id: 22, label: '电风扇', price: 22000, icon: 'fan' },
      { id: 23, label: '电吹风', price: 23000, icon: 'hair-dryer' },
      { id: 24, label: '吸尘器', price: 24000, icon: 'vacuum-cleaner' },
    ],
    actions: [
      {
        label: '计算总价',
        pos: 'before',
        onClick: (value, ctx) => {
          alert(value);
        },
      },
      {
        label: '产品主页',
        onClick: (value, ctx) => {},
      },
    ],
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();
```

--------------------------------

### Initialize and Configure AutoStore in JavaScript

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/colorpicker.html

This snippet demonstrates how to initialize an AutoStore instance with configurable options for theme color and other color presets. It uses the `configurable` helper to define UI widgets for these settings. The store's state is then displayed and updated in a JSON viewer.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  themeColor: configurable('#e23a31', {
    label: '主题色',
    widget: 'colorpicker',
  }),
  colors: configurable('#1890ff', {
    label: '选择颜色',
    widget: 'colorpicker',
    presets: [
      'red',
      'blue',
      'green',
      'yellow',
      'orange',
      'purple',
      'pink',
      'brown',
      'gray',
      'black',
    ],
  }),
  inlineColor: configurable('#e23a31', {
    label: '主题色',
    widget: 'colorpicker',
    inline: true,
    swatches: [
      '#e23a31',
      '#1890ff',
      '#2f54eb',
      '#f5222d',
      '#faad14',
      '#13c2c2',
      '#722ed1',
      '#52c41a',
      '#faad14',
    ],
  }),
  inlineColor2: configurable('#e23a31', {
    label: '主题色',
    widget: 'colorpicker',
    inline: true,
    swatches: [],
  }),
});

const form = document.querySelector('#form');
form.bind(store);

const refreshViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.innerHTML = JSON.stringify(store.state);
};

store.watch(refreshViewer);
refreshViewer();
```

--------------------------------

### Initialize and Configure AutoStore

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/widgets/switch.html

This snippet demonstrates how to initialize an AutoStore instance with various configurable options, including switches, labels, and custom input/state transformations. It utilizes the `configurable` function to define the properties of the store.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  AutoStore: configurable(true, {
    label: 'AutoStore',
    widget: 'switch',
  }),
  VoerkaI18n: configurable(false, {
    label: 'VoerkaI18n',
    widget: 'switch',
  }),
  checkLabel: configurable(false, {
    label: '指定label',
    widget: 'switch',
    checkLabel: '是否开启',
  }),
  switchValues: configurable('开启', {
    label: '复选值',
    widget: 'switch',
    switchValues: ['开启', '关闭'],
  }),
  values: configurable(1, {
    label: '复选值',
    widget: 'switch',
    toInput: (value) => (value === 1 ? '开启' : '关闭'),
    toState: (value) => (value === '开启' ? 1 : 0),
    switchValues: ['开启', '关闭'],
  }),
});
```

--------------------------------

### Initialize and Bind AutoStore with State Management

Source: https://github.com/zhangfisher/autostore/blob/master/docs/demos/autoform/form/create.html

This snippet demonstrates the initialization of an AutoStore instance with configurable user credentials and order details. It binds the store to an HTML form and sets up a watcher to update a JSON viewer whenever the store's state changes. It also includes an event listener to increment an order count.

```javascript
const { AutoStore, configurable } = AutoStoreSpaces;
const store = new AutoStore({
  user: {
    username: configurable('<NAME>'),
    password: configurable('<PASSWORD>'),
  },
  order: {
    price: configurable(100),
    count: configurable(1),
    total: (order) => order.price * order.count,
  },
});

const form = document.querySelector('#login');
form.bind(store);

const updateJsonViewer = () => {
  const jsonViewer = document.getElementById('viewer');
  jsonViewer.data = Object.assign({}, store.state);
  jsonViewer.expandAll();
};

store.watch(() => {
  updateJsonViewer();
});

updateJsonViewer();

const button = document.getElementById('updateCount');
button.addEventListener('click', () => {
  store.state.order.count += 1;
});
```

--------------------------------

### Async Computed Property Example - TSX

Source: https://github.com/zhangfisher/autostore/blob/master/docs/zh/store/guide/computed/async.md

Illustrates the basic usage of an asynchronous computed property 'fullName' that depends on 'user.firstName' and './lastName'. When these dependencies change, 'fullName' automatically recalculates. The example shows how to access the computed value via 'state.user.fullName.value' and monitor its loading state via 'state.user.fullName.loading'.

```tsx
const store = createStore({
  user: {
    firstName: "John",
    lastName: "Doe",
    fullName: computed(async (scope) => {
      return `${scope.firstName} ${scope.lastName}`;
    }, ["./firstName", "./lastName"])
  }
});
```