vue-tiny-store

A very simple, elegant and easy alternative to vuex within less than 1.5kb

Note:
Vue 1.x is not supported.

Usage

Install

Download file vue-tiny-store.min.js and import and register Vue plugin:

import Vue from 'vue'
import VueTinyStore  from "@/plugins/vue-tiny-store"

Vue.use(VueTinyStore,{
  stores: [ yourStores ],
})

Quickstart

Create your stores in separate files, for example counter.js

// Make a store for the "counter"
export default {
    // You must define the name of the individual store
    name: "counter",

    // The state of the counter
    state: {
        count: 0
    },

    /**
      All actions to mutate the counter state
    */
    increment() {
        this.state.count += 1
    },
    decrement() {
        this.state.count -= 1
    }
}

Reference store in main.js with stores parameter

import VueTinyStore from "@/plugins/vue-tiny-store"
import counterStore from '@/store/counter'

Vue.use(VueTinyStore,{
  stores: [counterStore],
})

Finally, just manage global state in your components, without importing in each file of store. It's clean!

<template>
  <div>
    <p>counter {{$state("counter").count}}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  methods:{
      increment(){
        this.$action('counter:increment')
      },
      decrement(){
        this.$action('counter:decrement')
      },
    }
}
</script>

Configuration

Vue Tiny Store takes 2 parameter: (stores, [debug])

Options

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Contact me

• email: [email protected]
• twitter: @ecapurro_ok

Author

Copyright © 2022 - Emanuel Capurro

GitHub

https://github.com/ecapurro/vue-tiny-store