@ayase/mini-store

mini-store

mini-store for vue 3

A state store for React component.

Install

Example

import { Provider, create, connect } from '@ayase/mini-store';
import { computed } from 'vue';

const Counter = {
  name: 'Counter',

  setup() {
    return { store: computed(() => create({ count: 0 })) };
  },

  render() {
    return (
      <Provider store={this.store}>
        <div>
          <Buttons />
          <Result />
        </div>
      </Provider>
    );
  }
};

const Buttons = connect()({
  name: 'Buttons',
  props: ['store'],

  methods: {
    handleClick(step) {
      const { count } = this.store.getState();
      this.store.setState({ count: count + step });
    }
  },

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick(1)}>+</button>
        <button onClick={() => this.handleClick(-1)}>-</button>
      </div>
    );
  }
});

const Result = connect((state) => ({ count: state.count }))({
  props: ['count'],

  render() {
    return <div>{this.count}</div>;
  }
});

API

create(initialState)

Creates a store that holds the state. initialState is plain object.

<Provider store>

Makes the store available to the connect() calls in the component hierarchy below.

connect(mapStateToProps)

Connects a React component to the store. It works like Redux's connect, but only accept mapStateToProps. The connected component also receive store as a prop, you can call setState directly on store.

Development

yarn install
yarn start

License

MIT