|
| 1 | +# [4.0.0](https://github.com/vuejs/vuex/compare/v4.0.0-rc.2...v4.0.0) (2021-02-02) |
| 2 | + |
| 3 | +This is the official Vuex 4 release. |
| 4 | + |
| 5 | +The focus for Vuex 4 is compatibility. Vuex 4 supports Vue 3, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3. |
| 6 | + |
| 7 | +There are a few breaking changes described in a later section, so please check them out. |
| 8 | + |
| 9 | +You can find basic usage with both Option and Composition API in the `example` directory. |
| 10 | + |
| 11 | +It's still released under `next` tag in NPM package as same as Vue 3. We're planning to remove `next` tag once Vue 3 is ready to remove it. |
| 12 | + |
| 13 | +There have been a lot of contribution to make Vuex 4 stable. Thank you all for your very much appreciated help. It wouldn't have been possible without this wonderful Vue community! |
| 14 | + |
| 15 | +## Documentation |
| 16 | + |
| 17 | +To check out docs, visit [next.vuex.vuejs.org](https://next.vuex.vuejs.org/). |
| 18 | + |
| 19 | +## Breaking changes |
| 20 | + |
| 21 | +### Installation process has changed |
| 22 | + |
| 23 | +To align with the new Vue 3 initialization process, the installation process of Vuex has changed. |
| 24 | + |
| 25 | +To create a new store instance, users are now encouraged to use the newly introduced `createStore` function. |
| 26 | + |
| 27 | +```js |
| 28 | +import { createStore } from 'vuex' |
| 29 | + |
| 30 | +export const store = createStore({ |
| 31 | + state() { |
| 32 | + return { |
| 33 | + count: 1 |
| 34 | + } |
| 35 | + } |
| 36 | +}) |
| 37 | +``` |
| 38 | + |
| 39 | +> 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. |
| 40 | +
|
| 41 | +To install Vuex to a Vue instance, pass the store instance instead of Vuex. |
| 42 | + |
| 43 | +```js |
| 44 | +import { createApp } from 'vue' |
| 45 | +import { store } from './store' |
| 46 | +import App from './App.vue' |
| 47 | + |
| 48 | +const app = createApp(App) |
| 49 | + |
| 50 | +app.use(store) |
| 51 | + |
| 52 | +app.mount('#app') |
| 53 | +``` |
| 54 | + |
| 55 | +### Bundles are now aligned with Vue 3 |
| 56 | + |
| 57 | +The following bundles are generated to align with Vue 3 bundles: |
| 58 | + |
| 59 | +- `vuex.global(.prod).js` |
| 60 | + - For direct use with `<script src="...">` in the browser. Exposes the Vuex global. |
| 61 | + - Global build is built as IIFE, and not UMD, and is only meant for direct use with `<script src="...">`. |
| 62 | + - Contains hard-coded prod/dev branches and the prod build is pre-minified. Use the `.prod.js` files for production. |
| 63 | +- `vuex.esm-browser(.prod).js` |
| 64 | + - For use with native ES module imports (including module supporting browsers via `<script type="module">`. |
| 65 | +- `vuex.esm-bundler.js` |
| 66 | + - For use with bundlers such as `webpack`, `rollup` and `parcel`. |
| 67 | + - Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler). |
| 68 | + - Does not ship minified builds (to be done together with the rest of the code after bundling). |
| 69 | +- `vuex.cjs.js` |
| 70 | + - For use in Node.js server-side rendering with `require()`. |
| 71 | + |
| 72 | +### Typings for `ComponentCustomProperties` |
| 73 | + |
| 74 | +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. |
| 75 | + |
| 76 | +Place the following code in your project to allow `this.$store` to be typed correctly: |
| 77 | + |
| 78 | +```ts |
| 79 | +// vuex-shim.d.ts |
| 80 | + |
| 81 | +import { ComponentCustomProperties } from 'vue' |
| 82 | +import { Store } from 'vuex' |
| 83 | + |
| 84 | +declare module '@vue/runtime-core' { |
| 85 | + // Declare your own store states. |
| 86 | + interface State { |
| 87 | + count: number |
| 88 | + } |
| 89 | + |
| 90 | + interface ComponentCustomProperties { |
| 91 | + $store: Store<State> |
| 92 | + } |
| 93 | +} |
| 94 | +``` |
| 95 | + |
| 96 | +### `createLogger` function is exported from the core module |
| 97 | + |
| 98 | +In Vuex 3, `createLogger` function was exported from `vuex/dist/logger` but it's now included in the core package. You should import the function directly from `vuex` package. |
| 99 | + |
| 100 | +```js |
| 101 | +import { createLogger } from 'vuex' |
| 102 | +``` |
| 103 | + |
| 104 | +### Bug Fixes Included Since 4.0.0-rc.2 |
| 105 | + |
| 106 | +* export missing `storeKey` ([4ab2947](https://github.com/vuejs/vuex/commit/4ab294793a2c20ea6040f01f316618682df61fff)) |
| 107 | +* fix tree shaking notworking in webpack bundle ([#1906](https://github.com/vuejs/vuex/issues/1906)) ([#1907](https://github.com/vuejs/vuex/issues/1907)) ([aeddf7a](https://github.com/vuejs/vuex/commit/aeddf7a7c618eda7f316f8a6ace8d21eb96c29ff)) |
| 108 | + |
1 | 109 | # [4.0.0-rc.2](https://github.com/vuejs/vuex/compare/v4.0.0-rc.1...v4.0.0-rc.2) (2020-11-25)
|
2 | 110 |
|
3 | 111 | ### Bug Fixes
|
|
0 commit comments