# redtail

> redtail 是一个简化vuex概念和接口的插件, redtail只有两个接口, 可以更方便的接入vuex

Latest version **0.0.3** (published 2018-01-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install redtail
pnpm add redtail
yarn add redtail
bun add redtail
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2018-01-15 |
| First published | 2017-12-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | aprday |

## Links

- npm: https://www.npmjs.com/package/redtail
- Repository: https://github.com/sophiasofar/redtail
- Homepage: https://github.com/sophiasofar/redtail#readme
- Issues: https://github.com/sophiasofar/redtail/issues
- npm.io page: https://npm.io/package/redtail

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [babel-plugin-transform-decorators-legacy](https://npm.io/package/babel-plugin-transform-decorators-legacy.md) ^1.3.4

## Recent versions

- 0.0.3 (latest) — 2018-01-15
- 0.0.2 — 2017-12-21
- 0.0.1 — 2017-12-20

## README

# Redtail

redtail 是一个简化vuex概念和接口的插件, redtail只有两个接口, 可以更方便的接入vuex

### 安装

    npm i redtail

### 使用

#### 新建一个组件

    import {init} from 'redtail';
    const store = init(new Vuex.Store({
        state: {
            message: 'Hello!'
        },
        // 直接书写异步代码
        setMessageAsync (context, newValue) {
            setTimeout(() => {
                context.commit('message', newValue)
            });
        }
    }));

#### 绑定store到组件

    <template>
        <div id="app">
            <p>{{ message }}</p>
        </div>
    </template>
    <script>
        import {connet} from 'redtail';
        new Vue(connet({
            el: '#app',
            methods: {
                setMessage () {
                    store.commit('setMessageAsync', 'World!')
                }
            }
        }));
    </script>

#### 对应原方式

完整的vuex实例应该是

    const store = new Vuex.Store({
        state: {
            message: 'Hello!'
        },
        // getter 集合
        getters: {
            getMessage: state => {
                return state.message;
            }
        },
        // setter 集合
        mutations: {
            setMessage (state, newValue) {
                // 变更状态
                state.message = newValue;
            }
        },
        actions: {
            setMessageAsync (context, newValue) {
                setTimeout(() => {
                    context.commit('setMessage', newValue)
                });
            }
        }
    });

#### 最后把store和组件绑定

    <template>
        <div id="app">
            <p>{{ message }}</p>
        </div>
    </template>
    <script>
        new Vue({
            el: '#app',
            computed: {
                ...mapGetters([
                    'getMessage',
                    // ...
                ])
            },
            methods: {
                setMessage () {
                    store.commit('setMessageAsync', 'World!')
                }
            }
        });
    </script>

---
_Source: https://npm.io/package/redtail · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._