Welcome

to the next-gen - dead simple - store for Vue

Teddy helps you manage and access store states within Vue 2 and Vue 3.

This project is in preview mode 🚧. Even though I'm pretty confident its API won't change (and already plenty of unit tests cover its API) I'ld only recommend to use it for hobby testing.

Quick example

Here is how you would define a minimalproduct store:

// stores/product.js
export const state = {
products: [{ name: "honney" }, { name: "wood" }, { name: "straw" }]
}
export const getters = {
productNames: ({ state }) => state.products.map(product => product.name)
}
export const actions = {
async fetchProducts({ state }){
state.products = await fetch("...")
}
}

But then what if you wanted to sync your products in a list editor like a drag-n-drop re-ordering list? Thanks to the reactivity API, you would only need create a get/set computed property.

// NOT TEDDY
const products = computed({
get(){
return state.value.products
},
set(value) {
state.value.products = value
}
})
// See what Teddy offers above

What if you didn't have to?

store.js
Home.vue
store.js
import TeddyStore from "vue-teddy-store"
import * as product from "./stores/product.js"
const store = new TeddyStore()
store.add("product", product)
export store
Home.vue
<template>
<ul>
<li v-for="product in products" :key="product.id">{{product.name}}</li>
<button @click="products.push({ name: 'New product' })">Add product</button>
</ul>
</template>
<script>
import { sync } from "vue-teddy-store"
export default {
computed: {
products: sync("product", "products")
}
}
</script>

What is it in fact?

It's a store manager. You create your own stores using ref() and computed() methods from the Reactivity API of Vue 3 (also available in Vue 2 via @vue/composition-api package) and Teddy helps you accessing them.

Ok, but why?

If I tell you I'll make your life easier? Then you'll say, yeaaah but what about Vuex pluggins I use? Ah well, I'm not saying you should get rid of Vuex right away, several stores can live side-by-side easily. Teddy doesn't bite! Once you've seen how easy it is to have a store ready with the new Reactivity API of Vue 3 you don't see why still use Vuex. Hence why, I decided to make a lib that let's you manage your hand-made stores in the simplest ways.

Evan You, creator of Vue.js, has already been saying this for a while as they were working on the reactivity API for Vue 3 (which is already available through @vue/composition-api).

Let's play with it.