Vuetility

# Single store

I will add an example implementation soon!

Vuetility is consisting of two parts:

  • a VueX part which enhances the VueX base and add state variables to your store/s
  • a Vue Component part which enables you to grab the value of state variables from your stores through computed variables

# Setup

To get Vuetility working you need:

  • a correctly configured model
  • to register the (Vuetility)plugin with vue
  • creat ea (vuetiliy[vuex]) store
  • to initialize the plugin in every component you want access to Model and Store data

# Register Vuetility

See Register Vuetility under Namespaced stores. The registering is the same here.

# Creating a Vuetility Store

In addition to the usage with namespaced stores there is a simpler version if you just want to use a single store without namespaces.

Like with namespaced stores vuetilities setup is basically the same as if you would create a new Vuex store. The only difference lies in the models property which you can pass in and where you define the models oyu want to use.

import {UserModel} from 'UserModel.js'
import {EstimationModel} from 'EstimationModel.js'

const store = new Vuetility({
    models: {UserModel, EstimationModel},
    state: {
        count: 0        
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    }
});

export default  {
    name: 'my-vue-component'
    store,
    data(){ return {} }
}

# Initialize Vuetility

Refer to Initialize Vuetility under Namespaced stores. The initialize step is the same in both cases.

← Nuxt Usage →