diff options
Diffstat (limited to 'docs/guide/quickstart/store-anatomy.md')
-rw-r--r-- | docs/guide/quickstart/store-anatomy.md | 46 |
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); }); }, |