...

com.castsoftware.vuejs

What's new?

Please see Vue.js - 1.2 - Release Notes for more information.

Description

...

If your Web application contains Vue.js source code used inside JavaScript files and you want to view these object types and their links with other objects, then you should install this extension.

Supported Vue.js versions

Version	Support	Comment
v2.x

Supported template definitions

...

...

AIP Core compatibility

This extension is compatible with:

CAST AIP Core release	Supported
8.3.x

Prerequisites

...

• HTML5/JavaScript
• Web services linker service (internal technical extension)

...

Download and installation instructions

...

What results can you expect?

Once the analysis /snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten):

Image Modified

Objects

The following specific objects are displayed in CAST Enlighten:

Specific support

Store

The "Vuex.Store()" calls are searched for throughout the application, and the first parameter is used to resolve different links.

Dispatch

Vue.js extension support Vuex store dispatch methods are used to call shared function.

const store = new Vuex.Store({
  state: {
    pageTitle: 'Home',
    menu: menu,
    user: {},
    token: null,
    message: {
      type: null,
      body: null
    },
    config: config

  },
  mutations: {

    setAuth (state, { user, token }) {
      state.user = user
      state.token = token
      global.helper.ls.set('user', user)
      global.helper.ls.set('token', token)
    },
    setMenu (state, data) {
      state.menu = data
    },
    setPageTitle (state, data) {
      state.pageTitle = data
    },
    showMessage (state, type, body) {
      state.message = { type, body }
    }
  },
  actions: {

    checkAuth ({ commit }) {
      let data = {
        user: global.helper.ls.get('user'),
        token: global.helper.ls.get('token')
      }
      commit('setAuth', data)
    },
    checkPageTitle ({commit, state}, path) {
      for (let k in state.menu) {
        if (state.menu[k].href === path) {
          commit('setPageTitle', state.menu[k].title)
          break
        }
      }
    }
  }
})

export default store

the "sync()" calls are also used:

import store from './store'
import router from './router'
sync(store, router)

Dispatch

This extension supports "Vuex store dispatch" methods which are used to call shared functions. Here is an example of a classical classic architecture using this method.:

export const FETCH_DATA = "fetchData";

...

<template>
  <div></div>
</template>

<script>
import { FETCH_DATA } from "@/store/actions.type";

export default {
  name: "StoreExample",
  mounted: function() {
    this.$store.dispatch(FETCH_DATA)
  }
};
</script>

In EnlightenThis code gives the following results:

Webservices

Axios

The Vue.js extension supports webservices using Axios:

async onLogout() {
      await this.$axios.$post('/api/oauth/logout');
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await this.$axios.$get('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }

Giving the following graph in Enlightenresult:

Vue-resources

The Vue.js extension supports webservices using vue-resources.

async onLogout() {
      await this.$http.post('/api/oauth/logout');
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await this.$http.$get('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }

Giving the following graph in Enlightenresult:

Fetch

The Vue.js extension supports webservices using fetch:

async onLogout() {
      await fetch('/api/oauth/logout');
      this.setLogout(true);
      this.setCurrentUser(null);

      try {
        await fetch('/api/oauth/me')
      } catch (e) {
        // middleware redirects to login page
      }
    }

Giving the following graph in Enlightenresult:

Link transition

Sometimes calls to services are factorized into a function that only concatenates URI parts leading to the following kinds of bottleneck and making it hard to follow which function called a given service:

Click to enlarge

Image Removed

Link transition allows the extension to go through the specified functions to make a direct link between the function defining the service URI and the service object. This leads to a better graph without bottlenecks:

Click to enlarge

Image Removed

Quality rules

The following structural rules are provided:

Known limitations

Store map function

Currently there are no links to the following store map functions from components using them:

• mapGetters
• mapActions

For example:

// ...
<ToggleSwitch v-model="user.autosave_notes" @change="setAutosaveNotes(user.autosave_notes)" />
// ...
methods: {
    ...mapActions(['deleteUser', 'setShowLanguageTags', 'setAutosaveNotes', 'revokeUserAccess']),
    // ...
  }

const actions = {
  // ...
  setAutosaveNotes({ commit }, flag) {
    return client.put('/user/autosave-notes', { flag }).then(({ data }) => {
      commit(SET_USER, data)
    })
  }
}

No link shown in CAST Enlighten:

...

Known limitations

Functions passed as properties

In Vue.js, components can have properties, which could be functions. Links to those functions are currently unsupported.