Store Anatomy

Store

A "store" is a container that holds the application's state. Learn more about Vuex.

# Store structure
└── store
    ├── api.js                             # axios requests
    ├── index.js                           # import store modules
    ├── plugins
    └── modules
        └── FeatureName                    # feature module
            ├── FeatureStore.js            # feature store
            ├── AdditionalFeatureStore.js  # additional features per store
            ├── AnotherFeatureStore.js     # additional features per store

Modules

The application store is divided into modules to prevent the store from getting bloated. Each module contains its own state, mutations, actions, and getters. Learn more about Vuex modules.

Module Anatomy

• State: You cannot directly mutate the store's state. Learn more about state.
• Getters: Getters are used to compute derived state based on store state. Learn more about getters.
• Mutations: The only way to mutate the state is by committing mutations, which are synchronous transactions. Learn more about mutations.
• Actions: Asynchronous logic should be encapsulated in, and can be composed with actions. Learn more about actions.

Import new store modules in src/store/index.js.

// `src/store/index.js`

import Vue from "vue";
import Vuex from "vuex";

import FeatureNameStore from "./modules/FeatureNameStore";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    feature: FeatureNameStore, // store names can be renamed for brevity
  },
});

Complete store

A store module will look like this.

import api from "@/store/api";
import i18n from "@/i18n";

const FeatureNameStore = {
  // getters, actions, and mutations will be namespaced
  // based on the path the module is registered at
  namespaced: true,
  state: {
    exampleValue: "Off",
  },
  getters: {
    // namespace -> getters['featureNameStore/getExampleValue']
    getExampleValue: (state) => state.exampleValue,
  },
  mutations: {
    // namespace -> commit('featureNameStore/setExampleValue)
    setExampleValue: (state) => state.exampleValue,
  },
  actions: {
    // namespace -> dispatch('featureNameStore/getExampleValue')
    async getExampleValue({ commit }) {
      return await api
        .get("/redfish/v1/../..")
        .then((response) => {
          commit("setExampleValue", response.data.Value);
        })
        .catch((error) => console.log(error));
    },
    // namespace -> ('featureNameStore/saveExampleValue', payload)
    async saveExampleValue({ commit }, payload) {
      return await api
        .patch("/redfish/v1/../..", { Value: payload })
        .then(() => {
          commit("setExampleValue", payload);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};

export default FeatureNameStore;