You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,25 @@
1
1
# Vuex 4
2
2
3
-
This is the Vue 3 compatible version of Vuex. The focus is compatibility, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code for Vue 3.
3
+
This is the Vue 3 compatible version of Vuex. The focus is compatibility, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3.
4
4
5
5
## Status: Beta
6
6
7
-
All Vuex 3 feature works. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both option and composition API at `example`folder.
7
+
All Vuex 3 features work. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both option and Composition API in the `example`directory.
8
8
9
-
Please provide us feedback if you find anything. You may use [vue-next-webpack-preview](https://github.com/vuejs/vue-next-webpack-preview) to test out Vue 3 with Vuex 4.
9
+
Feedback is welcome should you discover any issues. You may use [vue-next-webpack-preview](https://github.com/vuejs/vue-next-webpack-preview) to test out Vue 3 with Vuex 4.
10
10
11
11
## Breaking changes
12
12
13
13
### Installation process has changed
14
14
15
-
To align with the new Vue 3 initialization process, the installation process of Vuex has changed as well.
15
+
To align with the new Vue 3 initialization process, the installation process of Vuex has changed.
16
16
17
-
You should use a new `createStore` function to create a new store instance.
17
+
To create a new store instance, users are now encouraged to use the newly introduced `createStore` function.
18
18
19
19
```js
20
20
import { createStore } from'vuex'
21
21
22
-
conststore=createStore({
22
+
exportconststore=createStore({
23
23
state () {
24
24
return {
25
25
count:1
@@ -28,14 +28,14 @@ const store = createStore({
28
28
})
29
29
```
30
30
31
-
> This is technically not a breaking change because you could still use `new Store(...)` syntax. However, to align with Vue 3 and also with Vue Router Next, we recommend users to use `createStore` function instead.
31
+
> Whilst this is not technically a breaking change, you may still use the `new Store(...)` syntax, we recommend this approach to align with Vue 3 and Vue Router Next.
32
32
33
-
Then to install Vuex to Vue app instance, pass the store instance instead of Vuex.
33
+
To install Vuex to a Vue instance, pass the store instance instead of Vuex.
34
34
35
35
```js
36
36
import { createApp } from'vue'
37
-
importstorefrom'./store'
38
-
importAppfrom'./APP.vue'
37
+
import{ store }from'./store'
38
+
importAppfrom'./App.vue'
39
39
40
40
constapp=createApp(App)
41
41
@@ -46,26 +46,26 @@ app.mount('#app')
46
46
47
47
### Bundles are now aligned with Vue 3
48
48
49
-
The bundles are generated as below to align with Vue 3 bundles.
49
+
The following bundles are generated to align with Vue 3 bundles:
50
50
51
51
-`vuex.global(.prod).js`
52
-
- For direct use via`<script src="...">` in the browser. Exposes the Vuex global.
53
-
-Note that global builds are not UMD builds. They are built as IIFEs and is only meant for direct use via`<script src="...">`.
54
-
- Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `.prod.js` files for production.
52
+
- For direct use with`<script src="...">` in the browser. Exposes the Vuex global.
53
+
-Global build is built as IIFE, and not UMD, and is only meant for direct use with`<script src="...">`.
54
+
- Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the `.prod.js` files for production.
55
55
-`vuex.esm-browser(.prod).js`
56
-
- For usage via native ES modules imports (in browser via `<script type="module">`.
56
+
- For use with native ES module imports (including module supporting browsers via `<script type="module">`.
57
57
-`vuex.esm-bundler.js`
58
-
- For use with bundlers like`webpack`, `rollup` and `parcel`.
58
+
- For use with bundlers such as`webpack`, `rollup` and `parcel`.
59
59
- Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler).
60
60
- Does not ship minified builds (to be done together with the rest of the code after bundling).
61
61
-`vuex.cjs.js`
62
-
- For use in Node.js server-side rendering via`require()`.
62
+
- For use in Node.js server-side rendering with`require()`.
63
63
64
64
### Typings for `ComponentCustomProperties`
65
65
66
-
Vuex 4 removes its global typings for `this.$store` within Vue Component due to solving[issue #994](https://github.com/vuejs/vuex/issues/994). When using TypeScript, you must provide your own augment declaration.
66
+
Vuex 4 removes its global typings for `this.$store` within Vue Component to solve[issue #994](https://github.com/vuejs/vuex/issues/994). When used with TypeScript, you must declare your own module augmentation.
67
67
68
-
Please place the following code in your project to have`this.$store`working.
68
+
Place the following code in your project to allow`this.$store`to be typed correctly:
0 commit comments