Skip to content

Commit 6734ac5

Browse files
committed
docs: make heading level semantically correct
1 parent df50e5e commit 6734ac5

13 files changed

+118
-116
lines changed

Diff for: docs/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44

55
Vuex is a **state management pattern + library** for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
66

7-
### What is a "State Management Pattern"?
7+
## What is a "State Management Pattern"?
88

99
Let's start with a simple Vue counter app:
1010

11-
``` js
11+
```js
1212
new Vue({
1313
// state
1414
data () {
@@ -58,7 +58,7 @@ If you want to learn Vuex in an interactive way you can check out this [Vuex cou
5858

5959
![vuex](/vuex.png)
6060

61-
### When Should I Use It?
61+
## When Should I Use It?
6262

6363
Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.
6464

Diff for: docs/api/README.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sidebar: auto
66

77
## Vuex.Store
88

9-
``` js
9+
```js
1010
import Vuex from 'vuex'
1111

1212
const store = new Vuex.Store({ ...options })
@@ -36,7 +36,7 @@ const store = new Vuex.Store({ ...options })
3636

3737
Register actions on the store. The handler function receives a `context` object that exposes the following properties:
3838

39-
``` js
39+
```js
4040
{
4141
state, // same as `store.state`, or local state if in modules
4242
rootState, // same as `store.state`, only in modules
@@ -81,7 +81,7 @@ const store = new Vuex.Store({ ...options })
8181

8282
An object containing sub modules to be merged into the store, in the shape of:
8383

84-
``` js
84+
```js
8585
{
8686
key: {
8787
state,
@@ -122,7 +122,7 @@ const store = new Vuex.Store({ ...options })
122122
123123
Turn the devtools on or off for a particular vuex instance. For instance passing false tells the Vuex store to not subscribe to devtools plugin. Useful for if you have multiple stores on a single page.
124124
125-
``` js
125+
```js
126126
{
127127
devtools: false
128128
}
@@ -178,7 +178,7 @@ const store = new Vuex.Store({ ...options })
178178
179179
Subscribe to store mutations. The `handler` is called after every mutation and receives the mutation descriptor and post-mutation state as arguments.
180180
181-
``` js
181+
```js
182182
const unsubscribe = store.subscribe((mutation, state) => {
183183
console.log(mutation.type)
184184
console.log(mutation.payload)
@@ -190,7 +190,7 @@ const store = new Vuex.Store({ ...options })
190190
191191
By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overridden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
192192
193-
``` js
193+
```js
194194
store.subscribe(handler, { prepend: true })
195195
```
196196
@@ -207,7 +207,7 @@ const store = new Vuex.Store({ ...options })
207207
Subscribe to store actions. The `handler` is called for every dispatched action and receives the action descriptor and current store state as arguments.
208208
The `subscribe` method will return an `unsubscribe` function, which should be called when the subscription is no longer needed. For example, when unregistering a Vuex module or before destroying a Vue component.
209209
210-
``` js
210+
```js
211211
const unsubscribe = store.subscribeAction((action, state) => {
212212
console.log(action.type)
213213
console.log(action.payload)
@@ -219,7 +219,7 @@ const store = new Vuex.Store({ ...options })
219219
220220
By default, new handler is added to the end of the chain, so it will be executed after other handlers that were added before. This can be overridden by adding `prepend: true` to `options`, which will add the handler to the beginning of the chain.
221221
222-
``` js
222+
```js
223223
store.subscribeAction(handler, { prepend: true })
224224
```
225225
@@ -229,7 +229,7 @@ const store = new Vuex.Store({ ...options })
229229
230230
Since 3.1.0, `subscribeAction` can also specify whether the subscribe handler should be called *before* or *after* an action dispatch (the default behavior is *before*):
231231
232-
``` js
232+
```js
233233
store.subscribeAction({
234234
before: (action, state) => {
235235
console.log(`before action ${action.type}`)
@@ -244,7 +244,7 @@ const store = new Vuex.Store({ ...options })
244244
245245
Since 3.4.0, `subscribeAction` can also specify an `error` handler to catch an error thrown when an action is dispatched. The function will receive an `error` object as the third argument.
246246
247-
``` js
247+
```js
248248
store.subscribeAction({
249249
error: (action, state, error) => {
250250
console.log(`error action ${action.type}`)

Diff for: docs/guide/README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ At the center of every Vuex application is the **store**. A "store" is basically
88

99
2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly **committing mutations**. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.
1010

11-
### The Simplest Store
11+
## The Simplest Store
1212

1313
:::tip NOTE
1414
We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)!
1515
:::
1616

1717
After [installing](../installation.md) Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations:
1818

19-
#### Vuex 3.x (for Vue 2)
19+
### Vuex 3.x (for Vue 2)
2020

21-
``` js
21+
```js
2222
import Vue from 'vue'
2323
import Vuex from 'vuex'
2424

@@ -36,9 +36,9 @@ const store = new Vuex.Store({
3636
})
3737
```
3838

39-
#### Vuex 4.x (for Vue 3)
39+
### Vuex 4.x (for Vue 3)
4040

41-
``` js
41+
```js
4242
import { createStore } from 'vuex'
4343
import { createApp } from 'vue'
4444

@@ -56,15 +56,15 @@ app.use(store)
5656

5757
Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
5858

59-
``` js
59+
```js
6060
store.commit('increment')
6161

6262
console.log(store.state.count) // -> 1
6363
```
6464

6565
In order to have an access to `this.$store` property in your Vue components, you need to provide the created store to Vue instance. Vuex has a mechanism to "inject" the store into all child components from the root component with the `store` option:
6666

67-
``` js
67+
```js
6868
new Vue({
6969
el: '#app',
7070
store: store,
@@ -84,7 +84,7 @@ new Vue({
8484

8585
Now we can commit a mutation from component's method:
8686

87-
``` js
87+
```js
8888
methods: {
8989
increment() {
9090
this.$store.commit('increment')

Diff for: docs/guide/actions.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ actions: {
3939
}
4040
```
4141

42-
### Dispatching Actions
42+
## Dispatching Actions
4343

4444
Actions are triggered with the `store.dispatch` method:
4545

@@ -98,7 +98,7 @@ actions: {
9898

9999
Note we are performing a flow of asynchronous operations, and recording the side effects (state mutations) of the action by committing them.
100100

101-
### Dispatching Actions in Components
101+
## Dispatching Actions in Components
102102

103103
You can dispatch actions in components with `this.$store.dispatch('xxx')`, or use the `mapActions` helper which maps component methods to `store.dispatch` calls (requires root `store` injection):
104104

@@ -121,7 +121,7 @@ export default {
121121
}
122122
```
123123

124-
### Composing Actions
124+
## Composing Actions
125125

126126
Actions are often asynchronous, so how do we know when an action is done? And more importantly, how can we compose multiple actions together to handle more complex async flows?
127127

Diff for: docs/guide/forms.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ The "Vuex way" to deal with it is binding the `<input>`'s value and call a metho
1515
``` html
1616
<input :value="message" @input="updateMessage">
1717
```
18+
1819
``` js
1920
// ...
2021
computed: {
@@ -40,13 +41,14 @@ mutations: {
4041
}
4142
```
4243

43-
### Two-way Computed Property
44+
## Two-way Computed Property
4445

4546
Admittedly, the above is quite a bit more verbose than `v-model` + local state, and we lose some of the useful features from `v-model` as well. An alternative approach is using a two-way computed property with a setter:
4647

4748
``` html
4849
<input v-model="message">
4950
```
51+
5052
``` js
5153
// ...
5254
computed: {

Diff for: docs/guide/getters.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const store = new Vuex.Store({
3434
})
3535
```
3636

37-
### Property-Style Access
37+
## Property-Style Access
3838

3939
The getters will be exposed on the `store.getters` object, and you access values as properties:
4040

@@ -69,7 +69,7 @@ computed: {
6969

7070
Note that getters accessed as properties are cached as part of Vue's reactivity system.
7171

72-
### Method-Style Access
72+
## Method-Style Access
7373

7474
You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:
7575

@@ -88,7 +88,7 @@ store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
8888

8989
Note that getters accessed via methods will run each time you call them, and the result is not cached.
9090

91-
### The `mapGetters` Helper
91+
## The `mapGetters` Helper
9292

9393
The `mapGetters` helper simply maps store getters to local computed properties:
9494

0 commit comments

Comments
 (0)