1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
# Store Anatomy
## Store
A "store" is a container that holds the application's state.
[Learn more about Vuex.](https://vuex.vuejs.org/)
```sh
# 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.](https://vuex.vuejs.org/guide/modules.html)
#### Module Anatomy
- **State:** You cannot directly mutate the store's state.
[Learn more about state.](https://vuex.vuejs.org/guide/state.html)
- **Getters:** Getters are used to compute derived state based on store state.
[Learn more about getters.](https://vuex.vuejs.org/guide/getters.html)
- **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)
- **Actions:** Asynchronous logic should be encapsulated in, and can be composed
with actions.
[Learn more about actions.](https://vuex.vuejs.org/guide/actions.html)
Import new store modules in `src/store/index.js`.
```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.
```js
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;
```
|
