vuelm
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

vuelm

Vuelm is Vue State Management inspired by Elm

0.8.3  •  Updated 2 years ago  •  by Keuller Magalhães  •  MIT License

It’s a Vue state management inspired by Elm architecture.

Concepts

There are basically four elements on Elm architecture: Model, Actions, Updates and View.

alt text

The image above describes the flow of Elm’s architecture. Vuelm tries to bring it to Vue components.

To know more about Elm Architecture, see this link.

Getting Started

Let’s to get started with a simple application: the counter.

First lets create our model. The model is composed by 3 parts: state, updates and actions.

import { store, types } from 'vuelm'

const Type = types('INCREMENT', 'DECREMENT')

const state = {
  count: 0
}

const updates = {
  [Type.INCREMENT](state) {
    state.count = state.count + 1
    return state
  },

  [Type.DECREMENT](state) {
    state.count = state.count - 1
    return state
  }
}

const actions = {
  increment() {
    this.update(Type.INCREMENT)
  },

  decrement() {
    this.update(Type.DECREMENT)
  }
}

export default store(state, updates, actions)

The code above is pretty simple and straightforward. Ths state is representated by { count: 0 }.

The updates may be of two types: INCREMENT or DECREMENT. The updates is responsible for change the state and produces a new state after those changes. In this case we’re just increment the count plus 1 or decrement minus 1.

The actions just call this.update(type) method passing the type of update that we need to.

To build the model object, we must to join those three elements, passing to store function as arguments.

Now we need to create our Vue component that will render the counter. The code below show the counter component:

<template>
  <div class="container">
    <label>Counter</label>
    <strong>{{count}}</strong>
    <br/>
    <button class="button" @click="increment()">Increment</button>
    <button class="button" @click="decrement()">Decrement</button>
  </div>
</template>

<script>
  import { connect } from 'vuelm'
  import counter from 'stores/counter'

  const Counter = {
    name: 'Counter',
    data() {
      return { count: 0 }
    }
  }

  export default connect(Counter, { counter })
</script>

This component has two buttons which are used to invoke actions from our store. We use connect function to bind the component with store. You can call actions directly from store, as you can see in above example, we associate increment and decrement action into component.

As we can see Vuelm brings the simplicity and powerful design from Elm architecture to our Vue components.

How To Install

To install Vuelm, you can use:

$ yarn add vuelm     // npm install vuelm -S

Or you can use vue-starter template, as shown below:

$ vue init keuller/vue-starter [project-name]

See the examples to learn more about Vuelm.

See Online Demos

Popularity

Weekly Downloads
28
Stars
34

Maintenance

Development

Last ver 2 years ago
Created 4 years ago
Last commit 2 years ago
6 days between commits

Technology

Node version: 8.6.0
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

3 contributors
Keuller Magalhaes
Maintainer, 54 commits, 1 merges
Works at KD Solution
kmagalhaes
17 commits
Tom Byrer
1 commits, 1 PRs

Tags

vue
state management
elm
vuelm
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.