1 | # Vuex 4
|
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 with Vue 3.
|
4 |
|
5 | ## Status: Beta
|
6 |
|
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 |
|
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 |
|
11 | ## Breaking changes
|
12 |
|
13 | ### Installation process has changed
|
14 |
|
15 | To align with the new Vue 3 initialization process, the installation process of Vuex has changed.
|
16 |
|
17 | To create a new store instance, users are now encouraged to use the newly introduced `createStore` function.
|
18 |
|
19 | ```js
|
20 | import { createStore } from 'vuex'
|
21 |
|
22 | export const store = createStore({
|
23 | state () {
|
24 | return {
|
25 | count: 1
|
26 | }
|
27 | }
|
28 | })
|
29 | ```
|
30 |
|
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 |
|
33 | To install Vuex to a Vue instance, pass the store instance instead of Vuex.
|
34 |
|
35 | ```js
|
36 | import { createApp } from 'vue'
|
37 | import { store } from './store'
|
38 | import App from './App.vue'
|
39 |
|
40 | const app = createApp(App)
|
41 |
|
42 | app.use(store)
|
43 |
|
44 | app.mount('#app')
|
45 | ```
|
46 |
|
47 | ### Bundles are now aligned with Vue 3
|
48 |
|
49 | The following bundles are generated to align with Vue 3 bundles:
|
50 |
|
51 | - `vuex.global(.prod).js`
|
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 | - `vuex.esm-browser(.prod).js`
|
56 | - For use with native ES module imports (including module supporting browsers via `<script type="module">`.
|
57 | - `vuex.esm-bundler.js`
|
58 | - For use with bundlers such as `webpack`, `rollup` and `parcel`.
|
59 | - Leaves prod/dev branches with `process.env.NODE_ENV` guards (must be replaced by bundler).
|
60 | - Does not ship minified builds (to be done together with the rest of the code after bundling).
|
61 | - `vuex.cjs.js`
|
62 | - For use in Node.js server-side rendering with `require()`.
|
63 |
|
64 | ### Typings for `ComponentCustomProperties`
|
65 |
|
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 |
|
68 | Place the following code in your project to allow `this.$store` to be typed correctly:
|
69 |
|
70 | ```ts
|
71 | // vuex-shim.d.ts
|
72 |
|
73 | import { ComponentCustomProperties } from 'vue'
|
74 | import { Store } from 'vuex'
|
75 |
|
76 | declare module '@vue/runtime-core' {
|
77 | // Declare your own store states.
|
78 | interface State {
|
79 | count: number
|
80 | }
|
81 |
|
82 | interface ComponentCustomProperties {
|
83 | $store: Store<State>
|
84 | }
|
85 | }
|
86 | ```
|
87 |
|
88 | ### `createLogger` function is exported from the core module
|
89 |
|
90 | 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.
|
91 |
|
92 | ```js
|
93 | import { createLogger } from 'vuex'
|
94 | ```
|
95 |
|
96 | ## TODOs as of 4.0.0-beta.2
|
97 |
|
98 | - Update docs
|