Changelog
4.0.0-beta.1 (2020-04-25)
The bundles are generated as below to align with Vue 3 bundles.
vuex.global(.prod).js
<script src="...">
in the browser. Exposes the Vuex global.<script src="...">
..prod.js
files for production.vuex.esm-browser(.prod).js
<script type="module">
.vuex.esm-bundler.js
webpack
, rollup
and parcel
.process.env.NODE_ENV
guards (must be replaced by bundler).vuex.cjs.js
require()
.ComponentCustomProperties
Vuex 4 removes its global typings for this.$store
within Vue Component due to solving issue #994. When using TypeScript, you must provide your own augment declaration.
Please place the following code in your project to have this.$store
working.
// vuex-shim.d.ts
declare module "@vue/runtime-core" {
// Declare your own store states.
interface State {
count: number
}
interface ComponentCustomProperties {
$store: Store<State>;
}
}
Changelog
4.0.0-alpha.1 (2020-03-15)
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.
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.
Please note that it's still unstable, and there might be bugs. Please provide us feedback if you find anything. You may use vue-next-webpack-preview to test out Vue 3 with Vuex 4.
To align with the new Vue 3 initialization process, the installation process of Vuex has changed as well.
You should use a new createStore
function to create a new store instance.
import { createStore } from 'vuex'
const store = createStore({
state () {
return {
count: 1
}
}
})
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 usecreateStore
function instead.
Then to install Vuex to Vue app instance, pass the store instance instead of Vuex.
import { createApp } from 'vue'
import store from './store'
import App from './APP.vue'
const app = createApp(Counter)
app.use(store)
app.mount('#app')