Skip to content

Commit 7cb9952

Browse files
committed
docs: update usage for 4.0 with Vue 3
1 parent dea0f30 commit 7cb9952

File tree

2 files changed

+42
-1
lines changed

2 files changed

+42
-1
lines changed

docs/guide/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ We will be using ES2015 syntax for code examples for the rest of the docs. If yo
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)
20+
1921
``` js
2022
import Vue from 'vue'
2123
import Vuex from 'vuex'
@@ -34,6 +36,24 @@ const store = new Vuex.Store({
3436
})
3537
```
3638

39+
#### Vuex 4.x (for Vue 3)
40+
41+
``` js
42+
import { createStore } from 'vuex'
43+
import { createApp } from 'vue'
44+
45+
const store = createStore({
46+
state () {
47+
return {
48+
count: 1
49+
}
50+
}
51+
})
52+
53+
const app = createApp({ /* your root component */ })
54+
app.use(store)
55+
```
56+
3757
Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
3858

3959
``` js

docs/installation.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,24 @@ Include `vuex` after Vue and it will install itself automatically:
1919

2020
``` bash
2121
npm install vuex --save
22+
23+
# If using Vue 3.0 + Vuex 4.0:
24+
npm install vuex@next --save
2225
```
2326

2427
### Yarn
2528

2629
``` bash
2730
yarn add vuex
31+
32+
# If using Vue 3.0 + Vuex 4.0:
33+
yarn add vuex@next --save
2834
```
2935

30-
When used with a module system, you must explicitly install Vuex via `Vue.use()`:
36+
When used with a module system, you must explicitly install Vuex as a plugin:
37+
38+
39+
#### With Vue 2
3140

3241
``` js
3342
import Vue from 'vue'
@@ -36,6 +45,18 @@ import Vuex from 'vuex'
3645
Vue.use(Vuex)
3746
```
3847

48+
#### With Vue 3
49+
50+
``` js
51+
import { createApp } from 'vue'
52+
import { createStore } from 'vuex'
53+
54+
const app = createApp({ ... })
55+
const store = createStore({ ... })
56+
57+
app.use(store)
58+
```
59+
3960
You don't need to do this when using global script tags.
4061

4162
### Promise

0 commit comments

Comments
 (0)