storeon/vue

A tiny (160 bytes) connector for Storeon and Vue

Storeon Vue

This is the Vue 3 compatible version of the package. For the Vue 2 support, see the 2.0 branch.

Storeon is a tiny event-based Redux-like state manager without dependencies. @storeon/vue package helps to connect store with Vue to provide a better performance and developer experience while remaining so tiny.

• Size. 160 bytes (+ Storeon itself) instead of ~3kB of Vuex (minified and gzipped).
• Ecosystem. Many additional tools can be combined with a store.
• Speed. It tracks what parts of state were changed and re-renders only components based on the changes.

Read more about Storeon article.

Install

npm install @storeon/vue -S

or

yarn add @storeon/vue

How to use (Demo)

Create a store with storeon as you do it usually. You must explicitly install plugin @storeon/vue via app.use().

store.js

import { createStoreon } from 'storeon'

let counter = store => {
  store.on('@init', () => ({ count: 0 }))
  store.on('inc', ({ count }) => ({ count: count + 1 }))
  store.on('dec', ({ count }) => ({ count: count - 1 }))
  store.on('incBy', ({ count }, amount) => ({ count: count + amount }))
}

export const store = createStoreon([counter])

index.js

Library provides a mechanism to "inject" the store into all child components from the root component with the store option:

import { createApp } from 'vue'
import { createStoreonPlugin } from '@storeon/vue'
import App from './App.vue'
import { store } from './store'

const app = createApp(App)

app.use(createStoreonPlugin(store))

app.mount('#app')

By providing the store option to the root instance, the store will be injected into all child components of the root and will be available on them as this.$storeon.

App.vue

<template>
  <div>
    <h1>The count is {{$storeon.state.count}}</h1>
    <button @click="dec">-</button>
    <button @click="inc">+</button>
  </div>
</template>

<script>
export default {
  methods: {
    inc() {
      this.$storeon.dispatch('inc')
    },
    dec() {
      this.$storeon.dispatch('dec')
    }
  }
};
</script>

Or use Composition API with useStoreon hook to get state and dispatch function

App.vue

<template>
  <div>
    <h1>The count is {{count}}</h1>
    <button @click="dec">-</button>
    <button @click="inc">+</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStoreon } from '@storeon/vue'

export default defineComponent({
  setup() {
    const { state, dispatch } = useStoreon()
    const { count } = state;

    function inc() {
      dispatch('inc')
    }
    function dec() {
      dispatch('dec')
    }

    return { count, inc, dec }
  }
});
</script>

The mapState Helper

When a component needs to make use of multiple store state properties, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the mapState helper which generates computed getter functions for us, saving us some keystrokes:

import { mapState } from '@storeon/vue/helpers'

export default {
  computed: mapState({
    // arrow functions can make the code very succinct!
    count: state => state.count,
    // passing the string value 'count' is same as `state => state.count`
    countAlias: 'count',
    // to access local state with `this`, a normal function must be used
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

We can also pass a string array to mapState when the name of a mapped computed property is the same as a state sub-tree name.

import { mapState } from '@storeon/vue/helpers'

export default {
  computed: mapState([
    // map this.count to storeon.state.count
    'count'
  ])
}

The mapDispatch Helper

You can dispatch actions in components with this.$storeon.dispatch('xxx'), or use the mapDispatch helper which maps component methods to store.dispatch calls:

import { mapDispatch } from '@storeon/vue/helpers'

export default {
  methods: {
    ...mapDispatch([
      // map `this.inc()` to `this.$storeon.dispatch('inc')`
      'inc',
      // map `this.incBy(amount)` to `this.$storeon.dispatch('incBy', amount)`
      'incBy'
    ]),
    ...mapDispatch({
      // map `this.add()` to `this.$storeon.dispatch('inc')`
      add: 'inc'
    })
  }
}

Using with Class Components

If you would like to write as more class-like style, use decorators from @storeon/vue/class

import { Vue } from 'vue-class-component'
import { State, Dispatch } from '@storeon/vue/class'

export default class extends Vue {
  @State count
  @Dispatch('inc') inc
  @Dispatch('dec') dec
}

Using with TypeScript

Plugin adds to Vue’s global/instance properties and component options. In these cases, type declarations are needed to make plugins compile in TypeScript. We can declare an instance property $storeon with type StoreonStore<State, Events>. You can also declare a component options store:

typing.d.ts

import { ComponentCustomProperties } from 'vue'
import { StoreonStore } from 'storeon'
import { StoreonVueStore } from '@storeon/vue'
import { State, Events } from './store'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $storeon: StoreonVueStore<State, Events>
  }
}

To let TypeScript properly infer types inside Vue component options, you need to define components with defineComponent function:

-export default {
+export default defineComponent({
  methods: {
    inc() {
      this.$storeon.dispatch('inc')
    }
  }
};

⚠️ To enable type checking in your template use this flag in the settings.json of your VSCode or VSCodium with Vetur plugin. For more information see Vetur documentation

{
  "vetur.experimental.templateInterpolationService": true
}

TODO

• Add examples