Vuetility

# State mutations

After setting up your project following the instructions provided in

The last step needed is to actually write your data into your state variables inside your store.

Vuetility provides three convenience mutation methods for this:

  • vuet-updateModel
    • updates the (whole of a) given Model with provided data
  • vuet-updateStateByModel
    • updates specific given states/variables inside provided model
  • vuet-resetModel
    • resets the model back to defaults as provided by its model

# A very basic example

context.commit('vuet-updateStateByModel', {
    model: 'ModelA', // the name of the model you want to update
    key: propertyNameOfModelA, // the key inside the model you want to update
    data: data // the data you want to set for the key inside the model
});

or

context.commit('vuet-updateStateByModel', {
    model: 'ModelA', // the name of the model you want to update
    data: data // the data you want to update the model with
});

ATTENTION: the key parameter is optional and does not need to be provided but if you do not provide a specific key be sure that the provided data resembles the data-structure of the model.

Example:

//model structure of 'ModelA'
{
    'data-a': {},
    'data-b': 'foo'
    'data-c': 0
}

// update 'data-b' for 'ModelA'
context.commit('vuet-updateStateByModel', {
    model: 'ModelA',
    key: 'data-b'
    data: 'bar'
});

// can also be done like this
//
// using this method you can update multiple key inside a model at once without the need to override
// the complete model
context.commit('vuet-updateStateByModel', {
    model: 'ModelA',
    data: {
        'data-b': 'bar'
    }
});

The vuet-* mutation methods will ensure that all state variables stay reactive, so its highly recommended to use them although you could use other(custom) means of setting your state variables.

# vuet-updateStateByModel

vuet-updateStateByModel only replaces the data you explicitly tell it to update. This means data you don't want to override will not be replaced with null or undefined or default values instead it will stay the same.

Example (compare this with vuet-updateModel):

// state model data inside your store
const state = {
    DataModel: {
        "data_a": "value_a",
        "data_b": "value_b",
        "data_c": "value_c",
    }
}

// new incoming data
let newData = {
    "data_c": "value_c_new",
}

// now update DataModel with new dadta
context.commit('vuet-updateStateByModel', {
    model: 'DataModel'
    data: newData
});

// updated model data inside your store
const state = {
    DataModel: {
        "data_a": "value_a",
        "data_b": "value_b",
        "data_c": "value_c_new",
    }
}

An example implementation can also be found in the repository at: Vuetility example implementation

Basic Data Model used in this example:

export class DataModel {
    model() {
        return {
            'data_a': {
                type: String
            },
            'data_b': {
                type: String
            }
        };
    }
}

The response object (as you get it back from axios or any other ajax client of your choice). The data we are after here can be found under data.data

    config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
    data:
        data: {
            data_a: "foo",
            data_b: "bar"
        }
        messages: [{…}]
        object: {type: "SUCCESS", value: "", summary: ""}
    headers: {pragma: "no-cache", date: "Thu, 25 Apr 2019 08:44:49 GMT", last-modified: "Thursday, 25-Apr-2019 08:44:49 GMT", server: "nginx/1.12.2", host: "localhost", …}
    request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
    status: 200
    statusText: "OK"
    __proto__: Object

Implementation of vuet-updateStateByModel in your store:

// actions inside your store
const actions = {
        /**
    	 * @param  Vuex context
    	 * @param  JSON config {
    	 * }
    	 */
        getData(context) {
            axios.get(url)
                .then(function(response) {
                    let data = _.get(response, 'data.data', {});

                    context.commit('vuet-updateStateByModel', {
                        model: 'DataModel'
                        data: data
                    });
                })
                .catch(function(error) {

                })
        }
}

# vuet-updateModel

While vuet-updateStateByModel allows you to set values on a granular level, vuet-updateModel is more of a brute force like method. It takes the incoming data and completely replaces the referenced model data with this new data.

Attention: this holds a possible risk as it might result in losing data!!

Example (compare this with vuet-updateStateByModel):

// state model data inside your store
const state = {
    DataModel: {
        "data_a": "value_a",
        "data_b": "value_b",
        "data_c": "value_c",
    }
}

// new incoming data
let newData = {
    "data_c": "value_c_new",
}

// now update DataModel with new dadta
context.commit('vuet-updateStateByModel', {
    model: 'DataModel'
    data: newData
});

// updated model data inside your store
const state = {
    DataModel: {
        "data_c": "value_c_new",
    }
}

# vuet-resetModel

This one is the easiest mutation of all three mutations described in this section. Just follow the example below and the model given will be reset to default values.


context.commit('vuet-resetModel', 'DataModel');

← Type Security →