summaryrefslogtreecommitdiff
path: root/docs/guide/quickstart/store-anatomy.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/guide/quickstart/store-anatomy.md')
-rw-r--r--docs/guide/quickstart/store-anatomy.md46
1 files changed, 23 insertions, 23 deletions
diff --git a/docs/guide/quickstart/store-anatomy.md b/docs/guide/quickstart/store-anatomy.md
index 3ad5694f..a01ddb64 100644
--- a/docs/guide/quickstart/store-anatomy.md
+++ b/docs/guide/quickstart/store-anatomy.md
@@ -2,8 +2,8 @@
## Store
-A "store" is a container that holds the application's state. [Learn more about
-Vuex.](https://vuex.vuejs.org/)
+A "store" is a container that holds the application's state.
+[Learn more about Vuex.](https://vuex.vuejs.org/)
```sh
# Store structure
@@ -26,26 +26,26 @@ bloated. Each module contains its own state, mutations, actions, and getters.
#### Module Anatomy
-- **State:** You cannot directly mutate the store's state. [Learn more about
- state.](https://vuex.vuejs.org/guide/state.html)
+- **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)
+ 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)
+ 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 Vue from "vue";
+import Vuex from "vuex";
-import FeatureNameStore from './modules/FeatureNameStore';
+import FeatureNameStore from "./modules/FeatureNameStore";
Vue.use(Vuex);
@@ -64,42 +64,42 @@ export default new Vuex.Store({
A store module will look like this.
```js
-import api from '@/store/api';
-import i18n from '@/i18n';
+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',
+ exampleValue: "Off",
},
getters: {
// namespace -> getters['featureNameStore/getExampleValue']
- getExampleValue: state => state.exampleValue,
+ getExampleValue: (state) => state.exampleValue,
},
mutations: {
// namespace -> commit('featureNameStore/setExampleValue)
- setExampleValue: state => state.exampleValue,
+ 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);
+ .get("/redfish/v1/../..")
+ .then((response) => {
+ commit("setExampleValue", response.data.Value);
})
- .catch(error => console.log(error));
+ .catch((error) => console.log(error));
},
// namespace -> ('featureNameStore/saveExampleValue', payload)
async saveExampleValue({ commit }, payload) {
return await api
- .patch('/redfish/v1/../..', { Value: payload })
+ .patch("/redfish/v1/../..", { Value: payload })
.then(() => {
- commit('setExampleValue', payload);
+ commit("setExampleValue", payload);
})
- .catch(error => {
+ .catch((error) => {
console.log(error);
});
},