# Store Anatomy

# Store

A "store" is a container that holds the application's state. Learn more about Vuex. (opens new window)

# 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. (opens new window)

# Module Anatomy

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

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;

← Page Anatomy