Browse Source

docs: update usage for 4.0 with Vue 3

Evan You 4 years ago
parent
commit
7cb9952576
2 changed files with 42 additions and 1 deletions
  1. 20 0
      docs/guide/README.md
  2. 22 1
      docs/installation.md

+ 20 - 0
docs/guide/README.md

@@ -16,6 +16,8 @@ We will be using ES2015 syntax for code examples for the rest of the docs. If yo
 
 After [installing](../installation.md) Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations:
 
+#### Vuex 3.x (for Vue 2)
+
 ``` js
 import Vue from 'vue'
 import Vuex from 'vuex'
@@ -34,6 +36,24 @@ const store = new Vuex.Store({
 })
 ```
 
+#### Vuex 4.x (for Vue 3)
+
+``` js
+import { createStore } from 'vuex'
+import { createApp } from 'vue'
+
+const store = createStore({
+  state () {
+    return {
+      count: 1
+    }
+  }
+})
+
+const app = createApp({ /* your root component */ })
+app.use(store)
+```
+
 Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
 
 ``` js

+ 22 - 1
docs/installation.md

@@ -19,15 +19,24 @@ Include `vuex` after Vue and it will install itself automatically:
 
 ``` bash
 npm install vuex --save
+
+# If using Vue 3.0 + Vuex 4.0:
+npm install vuex@next --save
 ```
 
 ### Yarn
 
 ``` bash
 yarn add vuex
+
+# If using Vue 3.0 + Vuex 4.0:
+yarn add vuex@next --save
 ```
 
-When used with a module system, you must explicitly install Vuex via `Vue.use()`:
+When used with a module system, you must explicitly install Vuex as a plugin:
+
+
+#### With Vue 2
 
 ``` js
 import Vue from 'vue'
@@ -36,6 +45,18 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 ```
 
+#### With Vue 3
+
+``` js
+import { createApp } from 'vue'
+import { createStore } from 'vuex'
+
+const app = createApp({ ... })
+const store = createStore({ ... })
+
+app.use(store)
+```
+
 You don't need to do this when using global script tags.
 
 ### Promise