@adelholtz/vuetility

Vuetility (README)

1. Todo
2. Prerequsisits
3. Latest version
4. Installation
5. Introduction

TODO

• allow/forbid undefined and null values for Model Properties
• core implementation for non namespaced stores

Prerequsisits

• Vue [vuejs.org]
• Vuex [vuex.vuejs.org]
• ...and a basic understanding of how both of these work (together)

Latest version

2.*

• rework of how computed variables are created

Installation

npm install @adelholtz/vuetility

yarn add @adelholtz/vuetility

Introduction

    <input
        :value="Model.idn"
        @input="updateState" // provided by vuetility
        vuet-path="Model.idn"
    />

//computed structure
computed: {
    Model() {
        return { ...this.$store.getters['Estimation/estimationModel'] }
    },
}

Vuex is great but in my opinion its lacking something very basic. In every Vue project i came across so far you have to write the same computed properties in different components over and over again. Sure, you can streamline this by using various different approaches but the problem stays the same and you will have to overcome this in every new project thinking about the best way to organize things. Thats why i came up with this little 'plugin', 'wrapper' 'addition' or whatever you'd like to call it.

This does not reinvent Vuex in any way, it does not temper with the core of Vuex or Vue!

I see Vuetility, Vuex and Vue like a Matryoshka, consisting of several layers which build upon each other enhancing the layer beneath giving them access to more features and convenience functions.

What is Vuetility then in general?

Vuetility contains basic logic for generic (Vuex)store and (Vue)component usage, by auto-generating (Vue)computed properties and (Vuex)state variables from provided models.

It also gives you access to a set of predefined mutations which you can use with every state variable in your stores/modules.

The model can/must also contain:

• a renderer per property.
• default values
• exact type definitions (String, Boolean etc.)

Project Goals:

• no need to write any computed properties for your models properties in your custom component
• no need to write code in your store that handles the update/setting process of model data
• support of multiple models per store/component

Documentation: https://adelholtz.github.io/vuetility/

Please let me know if the usage instructions and example are unclear in any way and should be improved!