1# Store Anatomy
2
3## Store
4
5A "store" is a container that holds the application's state. [Learn more about Vuex.](https://vuex.vuejs.org/)
6
7```sh
8# Store structure
9└── store
10    ├── api.js                             # axios requests
11    ├── index.js                           # import store modules
12    ├── plugins
13    └── modules
14        └── FeatureName                    # feature module
15            ├── FeatureStore.js            # feature store
16            ├── AdditionalFeatureStore.js  # additional features per store
17            ├── AnotherFeatureStore.js     # additional features per store
18```
19
20### Modules
21
22The 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.](https://vuex.vuejs.org/guide/modules.html)
23
24#### Module Anatomy
25
26- **State:** You cannot directly mutate the store's state. [Learn more about state.](https://vuex.vuejs.org/guide/state.html)
27- **Getters:** Getters are used to compute derived state based on store state. [Learn more about getters.](https://vuex.vuejs.org/guide/getters.html)
28- **Mutations:** The only way to mutate the state is by committing mutations, which are synchronous transactions. [Learn more about mutations.](https://vuex.vuejs.org/guide/mutations.html)
29- **Actions:** Asynchronous logic should be encapsulated in, and can be composed with actions. [Learn more about actions.](https://vuex.vuejs.org/guide/actions.html)
30
31Import new store modules in `src/store/index.js`.
32
33```js
34// `src/store/index.js`
35
36import Vue from 'vue';
37import Vuex from 'vuex';
38
39import FeatureNameStore from './modules/FeatureNameStore';
40
41Vue.use(Vuex);
42
43export default new Vuex.Store({
44  state: {},
45  mutations: {},
46  actions: {},
47  modules: {
48    feature: FeatureNameStore, // store names can be renamed for brevity
49  },
50});
51```
52
53## Complete store
54
55A store module will look like this.
56
57```js
58import api from '@/store/api';
59import i18n from '@/i18n';
60
61const FeatureNameStore = {
62  // getters, actions, and mutations will be namespaced
63  // based on the path the module is registered at
64  namespaced: true,
65  state: {
66    exampleValue: 'Off',
67  },
68  getters: {
69    // namespace -> getters['featureNameStore/getExampleValue']
70    getExampleValue: state => state.exampleValue,
71  },
72  mutations: {
73    // namespace -> commit('featureNameStore/setExampleValue)
74    setExampleValue: state => state.exampleValue,
75  },
76  actions: {
77    // namespace -> dispatch('featureNameStore/getExampleValue')
78    async getExampleValue({ commit }) {
79      return await api
80        .get('/redfish/v1/../..')
81        .then(response => {
82          commit('setExampleValue', response.data.Value);
83        })
84        .catch(error => console.log(error));
85    },
86    // namespace -> ('featureNameStore/saveExampleValue', payload)
87    async saveExampleValue({ commit }, payload) {
88      return await api
89        .patch('/redfish/v1/../..', { Value: payload })
90        .then(() => {
91          commit('setExampleValue', payload);
92        })
93        .catch(error => {
94          console.log(error);
95        });
96    },
97  },
98};
99
100export default FeatureNameStore;
101```
102