Simples Store, sem Vuex

[fabionogueira]

A maioria da aplicações não necessitam da complexidade do Vuex, nestes casos simples usei a abordagem abaixo e está me atendendo bem, segue a dica, usando Vue 2.6

store.js Criando minha store

import storeLib from './storeLib'

const Store = storeLib({
    count: 10
})

export default Store

component.js Usando minha store

<script>
import Store from './store'

export default {
    name: 'Component',
    data: () => ({
        count: 0
    }),
    created () {
        Store.attach('count', this)
    },
    methods: {
        incrementar() {
            Store.set('count', this.count + 1)
        }
    }
}

<template>
    <h1>{{ count }}</h1>
    <button @click="incrementar">incrementar</button>
</template>
</script>

Sim, é só isso, o valor de count irá refletir em qualquer componente que usar Store.attach('count', this) Pra finalizar, segue a storeLib

storeLib.js

export default function create(store) {
    const instances = {}
    const Store = {
        attach(key, instance, _default) {
            let value

            instances[key] = instances[key] || {}
            instances[key][instance._uid] = instance

            value = store[key] == undefined ? _default : store[key]
            instance[key] = value

            return value
        },
        dettach(key, instance) {
            if (instances[key]) {
                delete (instances[key][instance._uid])
            }
        },
        set(key, value) {
            let i, instance
            let list = instances[key]

            store[key] = value

            if (list) {
                for (i in list) {
                    instance = list[i]

                    if (instance._isDestroyed) {
                        delete (list[i])
                        continue
                    }

                    instance[key] = value
                }
            }
        },
        get(key) {
            return store[key]
        }
    }

    return Store
}

[SkyaTura]

Por que você não transforma isso numa lib? 🤔

[fabionogueira]

É uma boa ideia!

[fabionogueira]

Lib criada: https://www.npmjs.com/package/vue-data-store

[leomp12]

Acho que a maioria das aplicações não precisa (ou não deveria) de nenhum state manager, nem mesmo um muito simples :smile:

Componentes cujo contexto é baseado só na API de props/slots/events tendem a ser mais simples de reutilizar, acho que é o caminho ideal sempre que possível, usando um state manager adicional só para as views de SPAs mais complexos (facilita pra trabalhar entre rotas realmente).