Vuex Modules

Vue modules contains our core modules used throughout the bizjournals' ecosystem.

Installing

Using npm:

npm install @bizjournals/vue-modules

Using yarn:

yarn add @bizjournals/vue-modules

Configuring your environment:

You will need to configure an NPM_TOKEN within your project to include these private modules. The best idea is to use an existing project as an example.

For simple setups the .gitlab-ci.yml file within this project as a guide to accessing project variables via the .npmrc file

Example

import Vue from "vue";
import Vuex from "vuex";
import { user, market, viewport } from "@bizjournals/vue-modules";
import localModule from "./src/modules";

Vue.use(Vuex);

export default new Vuex.Store({
    ...,
    modules: {
        user,
        market,
        viewport,
        localModule
    },
    actions: {
        setup() {
            return Promise.all([
                dispatch('user/init'),
                dispatch('market/init'),
                dispatch('viewport/init'),
                dispatch('localModule/doSomething'),
            ]);
        }
    }
});

User

The user module handles login / logout and other user specific responsibilities as well as reflections upon the various states of the user.

State

The state map provides a look into how the state will look after initialization as well as provides defaults to hook into for reactivity.

export default {
    // --
    // Local variables for control flow
    status: PENDING,
    hasAdBlocker: false,

    // --
    // API response variables
    uin: null,
    type: null,
    email: null,
    welcome: null,
    emailProducts: {},
    fromPortal: null,
    hasCart: null,
    noembargo: [],
    noembargo_subs: [],
    saved_article_ids: [],
    officepass: []
};

Getters

Getters can be brought in using the mapGetters helper in Vuex. Refer to Vuex's documentation for details.

$ isUserPending

$ isUserLoading

$ isUserReady

$ isUserError

$ isAnonymous

$ isLoggedIn

$ isBizjournalsAccount

$ isSubscribed

• A functional response for whether a user is subscribed to a market. When provided the national market it reflects to evaluate whether the user is subscribed in any market.

• Will always return true when the account is a bizjournals account.

| Param | Type | Required | Default | Description | |-----------|--------|----------|-------------|---------------------------------------------------------------------| | market | string | Yes | | The market code being evaluated. | | noembargo | string | No | "noembargo" | The array within state being reflected upon for subscription status |

Mutations

Mutations should be accessed through the store commit helper. Please refer to the Vuex documentation for assistance.

$ SET_STATUS

$ SET_HAS_AD_BLOCKER

$ INSERT_USER_RESPONSE

Actions

Actions should be fired using the dispatch method on the store instance. Refer to the Vuex documentation for guidance.

$ checkAdBlocker

$ signOut

$ error

$ fetchUserData

$ init

• Sets up the user module initial state / configuration.
• options
  • baseUrl can be passed to configure the base url for the fetchUserData action

User / Analytics

This is a sub module to the user module that handles dispatching of bizjournals' analytics information.

State

For this first deployment of the analytics module the watcher is setup by default even though the mode is manual. When using the bizjournals' navigation this mode is switched to WATCH and will fire automatically based on the watched mutation. You can also include the plugin directly, and if you do not need manual control over firing anyltics it is recommended you include it.

export default {
    /**
     * Informs the plugin, when used, that it is going to watch mutations or no.
     *
     * @var mode : 'watch' | 'manual'
     */
    mode: MANUAL,

    /**
     * This is the mutation that is being watched by the plugin.
     *
     * @var {String} watch
     */
    watch: "user/analytics/SET_USER_DATA",

    /**
     * Internal variable to know if we've already sent the visitor.
     *
     * @var {Boolean} _sent
     */
    _sent: false,

    /**
     * This is the visitor data that gets sent when we dispatch a page visit.
     *
     * @var {Object} user
     */
    user: {
        source: "n/a",
        accountType: "Unknown",
    },
};

Mutations

Mutations should be accessed through the store commit helper. Please refer to the Vuex documentation for assistance.

$ CHANGE_MODE

• Alters what the mode is registered as. This does not automatically establish the watchers to fire off the analytics. Instead, this should be manipulated by the analytics plugin only.

$ SET_MUTATION_WATCHED

• Before dispatching your initialization of the store you can change the mutation you want analytics to fire off of. It is your responsibility to ensure this occurs after the analytics data has been set though, so use with caution.

$ SET_USER_DATA

• Used within the user module to establish the analytics data that is dispatched at a controlled time.

Actions

Actions should be fired using the dispatch method on the store instance. Refer to the Vuex documentation for guidance.

$ sendPageVisit

• This method sends the analytics data stored in state to Adobe Analytics. You should have already ensured the analytics data was available in the user module prior to dispatching this action.

Market

The market module is used to retrieve and store market specific data from the api or cache.

State

The base state for the market module may have objects which are not identified here but are identified in sub modules for the market. Sub modules will be identified below.

export default {
    // --
    // Local variables for control flow
    status: PENDING,

    // --
    // Primary database response keys
    market_id: null,
    market_code: null,
    market_name: null,
    market_abbrev: null,
    city: null,
    state: null,
    region: null,
    region_objective: null,
    analytics_code: null,
    local_sales_tax: null,
    primary_zip_code: null,
    timezone: null,
    utc_std_offset: null,
    utc_dst_offset: null,
    circ_product_id: null,
    is_virtual: null,
    market_color: null,
    markets: [],
    channels: []
};

Getters

$ isMarketPending

$ isMarketLoading

$ isMarketReady

$ isMarketError

Plugins

Plugins can be imported directly to your store, or they can be functionally applied to the store after the fact. Please refer to the Vuex documentation for guidance.

Example

import Vue from "vue";
import Vuex from "vuex";
import { aPlugin } from "@bizjournals/vue-modules/lib/plugins";

Vue.use(Vuex);

export default new Vuex.Store({
    ...,
    plugins: [aPlugin]
});

Analytics

The analytics plugin changes the mode of the analytics module to watch. It can be applied after the store has been created but will fire automatically if the user data is already available.