Javascript Vue

Vue-tiny-store: A simple and easy alternative to vuex within less than 1.5kb1 min read

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

Parameter
Type
Default
Requiered
Description

stores
array
null
true
Names or references of stores

debug
boolean
false
false
Watch debug events/actions into development console

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

Pin It on Pinterest

Generated by Feedzy