Vuex store module

Store modules are all stored in the /src/app/data/store folder and it is possible to automatically create them via command line

To be able to be automatically registered to the project, every store module needs to be in a separate folder with an index.js file that exports all main properties of a vuex module: mutations, state, getters and actions.

Connect a component to the store

It's possible to just import the mapGetters helper from vuex and start coding directly in the component, but with Blue, the vuex-connect package comes out of the box and allows you to create dumb component and then connect them to the store within a container component.

Example

this is a component which displays a list of items

in the js file we just create our prop

export default {
 name: 'dumb',

 pros: {
  items: {
   type: Array,
   required: true
  }
 }

}

and then in the .vue file we just iterate the received data

<script src="./dumb.js"></script>

<template>
 <div>
   <ul>
    <li :key="index" v-for="(item, index) in items">
     <p>{{ item }}</p>
    </li>
   </ul>
 </div>
</template>

Assuming that we have a store module with a getter called things that returns an array of strings, we can just create a container component that will connect our component to the store without it knowing the actual source of the data.

import dumb from 'dumb.vue'
import { connect } from 'vuex-connect'

const dumbConnected = connect({
 gettersToProps: {
  items: 'things' // this is our getter from the store
 }
})('dumb', dumb)

export default {
 name: 'smart',

 components: {
  dumbConnected
 }
}

In this scenario, the dumb component can be used elsewhere maybe with some other data from another store module or just from a stateful component.

A better solution!

Blue comes with some feature out of the box that allows you to type less: like the connectComponent method

import { connectComponent } from 'core/utils'

export default {
 name: 'smart',

 components: {
  dumb: connectComponent('dumb', {
   gettersToProps: {
    items: 'things' // this is our getter from the store
   }
  })
 }
}

for other utils check the Blue core section