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