|
@@ -1,25 +1,25 @@
|
|
# Vuex 4
|
|
# Vuex 4
|
|
|
|
|
|
-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.
|
|
|
|
|
|
+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.
|
|
|
|
|
|
## Status: Beta
|
|
## Status: Beta
|
|
|
|
|
|
-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.
|
|
|
|
|
|
+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.
|
|
|
|
|
|
-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.
|
|
|
|
|
|
+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.
|
|
|
|
|
|
## Breaking changes
|
|
## Breaking changes
|
|
|
|
|
|
### Installation process has changed
|
|
### Installation process has changed
|
|
|
|
|
|
-To align with the new Vue 3 initialization process, the installation process of Vuex has changed as well.
|
|
|
|
|
|
+To align with the new Vue 3 initialization process, the installation process of Vuex has changed.
|
|
|
|
|
|
-You should use a new `createStore` function to create a new store instance.
|
|
|
|
|
|
+To create a new store instance, users are now encouraged to use the newly introduced `createStore` function.
|
|
|
|
|
|
```js
|
|
```js
|
|
import { createStore } from 'vuex'
|
|
import { createStore } from 'vuex'
|
|
|
|
|
|
-const store = createStore({
|
|
|
|
|
|
+export const store = createStore({
|
|
state () {
|
|
state () {
|
|
return {
|
|
return {
|
|
count: 1
|
|
count: 1
|
|
@@ -28,14 +28,14 @@ const store = createStore({
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
-> 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.
|
|
|
|
|
|
+> 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.
|
|
|
|
|
|
-Then to install Vuex to Vue app instance, pass the store instance instead of Vuex.
|
|
|
|
|
|
+To install Vuex to a Vue instance, pass the store instance instead of Vuex.
|
|
|
|
|
|
```js
|
|
```js
|
|
import { createApp } from 'vue'
|
|
import { createApp } from 'vue'
|
|
-import store from './store'
|
|
|
|
-import App from './APP.vue'
|
|
|
|
|
|
+import { store } from './store'
|
|
|
|
+import App from './App.vue'
|
|
|
|
|
|
const app = createApp(App)
|
|
const app = createApp(App)
|
|
|
|
|
|
@@ -46,26 +46,26 @@ app.mount('#app')
|
|
|
|
|
|
### Bundles are now aligned with Vue 3
|
|
### Bundles are now aligned with Vue 3
|
|
|
|
|
|
-The bundles are generated as below to align with Vue 3 bundles.
|
|
|
|
|
|
+The following bundles are generated to align with Vue 3 bundles:
|
|
|
|
|
|
- `vuex.global(.prod).js`
|
|
- `vuex.global(.prod).js`
|
|
- - For direct use via `<script src="...">` in the browser. Exposes the Vuex global.
|
|
|
|
- - Note that global builds are not UMD builds. They are built as IIFEs and is only meant for direct use via `<script src="...">`.
|
|
|
|
- - Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `.prod.js` files for production.
|
|
|
|
|
|
+ - For direct use with `<script src="...">` in the browser. Exposes the Vuex global.
|
|
|
|
+ - Global build is built as IIFE, and not UMD, and is only meant for direct use with `<script src="...">`.
|
|
|
|
+ - Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the `.prod.js` files for production.
|
|
- `vuex.esm-browser(.prod).js`
|
|
- `vuex.esm-browser(.prod).js`
|
|
- - For usage via native ES modules imports (in browser via `<script type="module">`.
|
|
|
|
|
|
+ - For use with native ES module imports (including module supporting browsers via `<script type="module">`.
|
|
- `vuex.esm-bundler.js`
|
|
- `vuex.esm-bundler.js`
|
|
- - For use with bundlers like `webpack`, `rollup` and `parcel`.
|
|
|
|
|
|
+ - For use with bundlers such as `webpack`, `rollup` and `parcel`.
|
|
- Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler).
|
|
- Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler).
|
|
- Does not ship minified builds (to be done together with the rest of the code after bundling).
|
|
- Does not ship minified builds (to be done together with the rest of the code after bundling).
|
|
- `vuex.cjs.js`
|
|
- `vuex.cjs.js`
|
|
- - For use in Node.js server-side rendering via `require()`.
|
|
|
|
|
|
+ - For use in Node.js server-side rendering with `require()`.
|
|
|
|
|
|
### Typings for `ComponentCustomProperties`
|
|
### Typings for `ComponentCustomProperties`
|
|
|
|
|
|
-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.
|
|
|
|
|
|
+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.
|
|
|
|
|
|
-Please place the following code in your project to have `this.$store` working.
|
|
|
|
|
|
+Place the following code in your project to allow `this.$store` to be typed correctly:
|
|
|
|
|
|
```ts
|
|
```ts
|
|
// vuex-shim.d.ts
|
|
// vuex-shim.d.ts
|