> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/state-management/accessing-state.md).
# Accessing State
In this example you will add release information (such as build number and environment name) to the store. You will then display the release information within the site footer.
Open **store.js** and update the store as follows:
{% code title="store.js" %}
```javascript
...
state: {
release: {
build: '1.0.0',
environment: 'Development'
},
healthChecks: [
{ title: 'SMTP check', passed: true },
{ title: 'Database check', passed: true }
]
}
...
```
{% endcode %}
Next open **App.vue** and update the footer as follows:
{% code title="App.vue" %}
```markup
...
...
```
{% endcode %}
Review the changes in your browser. The footer should now contain the release and health check details:
The `$store` is injected into all child components from the root component. This is enabled by configuring the store option within the root instance:
```markup
const app = new Vue({
el: '#app',
store
})
```
Using a computed property enables a reusable and concise approach. Add the following computed properties to the component:
{% code title="App.vue" %}
```javascript
...
computed: {
release() {
return this.$store.state.release
},
failedHealthCheckCount() {
return this.$store.state.healthChecks.filter(hc => !hc.passed).length
}
}
...
```
{% endcode %}
Next update the footer with these changes:
{% code title="App.vue" %}
```markup
...
...
```
{% endcode %}
When a component needs to make use of numerous state, declaring many computed properties is rather verbose. Fortunately we can leverage the `mapState` helper to avoid doing so.
> The `mapState` helper simply generates computed getter functions saving keystrokes.
First import the `mapState` helper from Vuex:
{% code title="App.vue" %}
```javascript
...
import { mapState } from 'vuex'
...
```
{% endcode %}
Update the components computed properties as follows:
{% code title="App.vue" %}
```javascript
...
computed: {
...mapState(['release', 'healthChecks']),
failedHealthCheckCount() {
return this.healthChecks.filter(hc => !hc.passed).length
}
}
...
```
{% endcode %}
In the case of the `failedHealthCheckCount` computed property, this approach works well within the context of this component. However, what if the same derived state was required in other components? You can achieve this flexibility by moving the computed property to the store.
Open **store.js** and add a new **getters** property:
{% code title="store.js" %}
```javascript
...
getters: {
failedHealthCheckCount: state => {
return state.healthChecks.filter(hc => !hc.passed).length
}
}
...
```
{% endcode %}
Back within **App.vue**, update `failedHealthCheckCount` to reference the new getter:
{% code title="App.vue" %}
```javascript
...
failedHealthCheckCount() {
return this.$store.getters.failedHealthCheckCount
}
...
```
{% endcode %}
When a component needs to make use of numerous getters, we can leverage the `mapGetters` helper for a simplified approach.
> The `mapGetters` helper simply maps store getters to local computed properties.
Import the `mapGetters` helper from Vuex:
{% code title="App.vue" %}
```javascript
...
import { mapState, mapGetters } from 'vuex'
...
```
{% endcode %}
Update the components computed properties as follows:
{% code title="App.vue" %}
```javascript
...
computed: {
...mapState(['release', 'healthChecks']),
...mapGetters(['failedHealthCheckCount'])
}
...
```
{% endcode %}
Save all changes and verify that the footer is still displaying the correct information.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://devworkshops.gitbook.io/masteringvuejs/state-management/accessing-state.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.