DEV Community: Nikos Koikas

🚩 Vuex Pattern: Smart Module Registration

Nikos Koikas — Mon, 30 Jul 2018 15:53:49 +0000

Vue Experience: ⚫️⚫️⚫️⚫️⚪️
Vuex Experience: ⚫️⚫️⚫️⚫️⚫️

Have your ever tried to manage your's application state?
Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. So, Vue offers Vuex but as official documentation says:

Vuex is using a single state tree, all state of our application is contained inside one big object. However, as our application grows in scale, the store can get really bloated.

To help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules.

I think you have already got confused, so let's go into code.

# This is a classic store structure with modules
├── index.html
├── main.js
├── components
└── store
    ├── index.js    # where we assemble modules and export the store
    └── modules
        ├── auth.js
        ├── posts.js
        └── comments.js

As you can see we have a store folder with an index.js and a subfolder named modules, which contains all modules. But module registration can start to get tedious.
index.js in store/

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import posts from './modules/posts'
import comments from './modules/comments'
// ...

Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        auth,
        posts,
        comments,
        // ...
    }
})

Example scaffolding for Vuex modules.

export default {
  namespaced: true,
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

This is the standard way for registering modules. If you know what namespacing is, go on.

By default, actions, mutations and getters inside modules are still registered under the global namespace - this allows multiple modules to react to the same mutation/action type.
If you want your modules to be more self-contained or reusable, you can mark it as namespaced with namespaced: true

Let's see Module Registration as mentioned by Chris Fritz(Vue core member) in a VueConf.

🚩 Firstly, let's add a index.js file in store/modules/

# This is our store structure with modules
├── index.html
├── main.js
├── components
└── store
    ├── index.js      # where we assemble modules and export the store
    └── modules
        ├── index.js  # this is the js file that solves the problem
        ├── auth.js
        ├── posts.js
        └── comments.js

🚩 Then let's modify this index.js in store/modules/index.js

import camelCase from 'lodash/camelCase'
// Storing in variable a context with all files in this folder
// ending with `.js`.
const requireModule = require.context('.', false, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    if (fileName === './index.js') return
    // filter fullstops and extension 
  // and return a camel-case name for the file
    const moduleName = camelCase(
        fileName.replace(/(\.\/|\.js)/g, '')
    )
  // create a dynamic object with all modules
    modules[moduleName] = {
    // add namespace here
        namespaced: true,
        ...requireModule(fileName).default
    // if you have exported the object with name in the module `js` file
    // e.g., export const name = {};
    // uncomment this line and comment the above
        // ...requireModule(fileName)[moduleName]
    }
})
export default modules

🚩 Let's delete namespacing from every module js file.

// export const name = { if you want to export an object with name
export default {
  // namespaced: true,   delete this line 
    state: {},
    getters: {},
    mutations: {},
    actions: {}
}

🚩 Finally the code from above, where we had to import all the modules can change to:
index.js in store/

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)
export default new Vuex.Store({
    modules
})

I think we have done an ''automated'' system that includes every file in modules folder. A smarter and cleaner code.

Until next time...Happy coding!

First job in software development industry. Remote or Onsite?

Nikos Koikas — Wed, 18 Jul 2018 23:07:37 +0000

Most of the time remotely jobs have flexible working schedule. You can work at night or early in the morning.

But, how would an entry level software developer react to a problem without help?

Writing a very simple plugin in Vue.js - (Example)

Nikos Koikas — Tue, 17 Jul 2018 09:42:52 +0000

What is a Vue Plugin?
Writing and using a plugin

In this post, i will be showing you how you can write a basic plugin in Vue.
You should have a prior experience with Vue and JavaScript.

What is a Vue Plugin?

Enables you to add global-level functionality to Vue.
It's a good way to keep your Vue components clear and small. You can also package and share your code with other developers.
Specifically, plugin is nothing more than an object which expose an install method.

Writing and using a plugin

Firstly, you should export the plugin object, so it can be used anywhere in your project. Then expose the install method which takes two parameters: Vue constructor and options object. The second parameter - options - is optional and customize your plugin.
plugin.js

// plugin.js

// This exports the plugin object.
export default {
  // The install method will be called with the Vue constructor as
  // the first argument, along with possible options
  install (Vue, options) {
  }
}

But a question which arises is where do I provide these options?

OK. You can call use() method and pass yourPlugin and your options as arguments, since you have already imported your plugin.js into main.js file.

main.js

// main.js

import Vue from 'vue'
import yourPlugin from './plugin.js'

// Without options
Vue.use(yourPlugin)
// With options
Vue.use(yourPlugin, {
    someOption: true
})

new Vue({
  el: '#app',
  render: h => h(App)
})

Install method - Plugins
The install method contains one or more of the following:

Add some global methods or properties.
Add one or more global assets: directives/filters/transitions etc.
Add some component options by global mixin.

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Add some Vue instance methods by attaching them to Vue.prototype.

// plugin.js
import Component from '/src/components/Component.vue'

// This exports the plugin object.
export default {
  // The install method will be called with the Vue constructor as         
  // the first argument, along with possible options
  install (Vue, options) {
     // Add or modify global methods or properties.
     Vue.yourMethod = (value) => value
     // Add a component or directive to your plugin, so it will be installed globally to your project.
     Vue.component('component', Component)
     // Add `Vue.mixin()` to inject options to all components.
     Vue.mixin({
         // Add component lifecycle hooks or properties.
         created() {
            console.log('Hello from created hook!')
         }
     })
     // Add Vue instance methods by attaching them to Vue.prototype.
     Vue.prototype.$myProperty = 'This is a Vue instance property.'
  }
}

Now, let's take a deep dive into our example's code

-------- EXAMPLE ---

Distributing

So you have built your first plugin in Vue. It's time to distribute it to the community - if you want.

Upload the source files to Github and then
Publish the package to NPM.

Until next time...Happy coding!