Skip to content

Commit c3944f3

Browse files
committed
release: v4.0.0
1 parent 36c90ca commit c3944f3

File tree

2 files changed

+109
-1
lines changed

2 files changed

+109
-1
lines changed

CHANGELOG.md

+108
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,111 @@
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+
1109
# [4.0.0-rc.2](https://github.com/vuejs/vuex/compare/v4.0.0-rc.1...v4.0.0-rc.2) (2020-11-25)
2110

3111
### Bug Fixes

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuex",
3-
"version": "4.0.0-rc.2",
3+
"version": "4.0.0",
44
"description": "state management for Vue.js",
55
"main": "dist/vuex.cjs.js",
66
"exports": {

0 commit comments

Comments
 (0)