Add store documentation

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I8597247305e1c3f7958f84b8496a7b75914b85c8

2 files changed, 103 insertions, 1 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 0a8e5086..fffc2590 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -56,7 +56,8 @@ module.exports = {
           {
             title: "Quick Start",
             children: [
-            "/guide/quickstart/page-anatomy"
+            "/guide/quickstart/page-anatomy",
+            "/guide/quickstart/store-anatomy"
           ]
           }
         ],
diff --git a/docs/guide/quickstart/store-anatomy.md b/docs/guide/quickstart/store-anatomy.md
new file mode 100644
index 00000000..63b48542
--- /dev/null
+++ b/docs/guide/quickstart/store-anatomy.md
@@ -0,0 +1,101 @@
+# 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;
+```