Super Simple State Management
npm install vue-blick
- Create your store
// store/alert-store.js
import { create } from 'vue-blick'
export default create({
message: 'Hello', // state
get reversedMessage() { // computed fields/getters
return this.message.split('').reverse().join('')
},
async setMessage(message) { // methods/actions
// await fetch(...)
this.message = message
}
})
- Inside any component
<template>
<div>alert: {{ message }}</div>
<div>reversed alert: {{ reversedMessage }}</div>
<button @click="setMessage('World')">alert!</button>
</template>
<script>
import alertStore from './store/alert-store'
export default {
mixins: [ alertStore.map('message', 'reversedMessage', 'setMessage') ]
}
</script>
You can also access the raw observable state through store.state
. Maybe you want to call a method from one store to another.