本文由五柳翻译、润色,原文地址 。
这是 Vuex 4 的正式版本。
Vuex 4 的重点是兼容性。Vuex 4 支持使用 Vue 3 开发,并且直接提供了和 Vuex 3 完全相同的 API,因此用户可以在 Vue3 项目中复用现有的 Vuex 代码。
文章的下面一部分将介绍一些重大更改,因此请认真查看。
你可以在
example
目录中找到 Option API 和 Composition API 相关的基本用法。
文档
查看文档,请浏览 next.vuex.vuejs.org.
重大更改
更改了安装过程
为了与 Vue 3 新的初始化过程保持一致,更改了 Vuex 的安装过程。
现在,推荐用户使用新引入的 createStore
函数来创建一个 store
实例。
import { createStore } from 'vuex'
export const store = createStore({
state() {
return {
count: 1
}
}
})
尽管从技术上来讲这并不是一个重大更改,你可能仍然使用的是
new Store(...)
的语法,但我们建议采用这种创建store
的方式来和 Vue 3、Vue Router 4 保持一致。
当要将 Vuex 安装到 Vue 实例时,请传入 store
实例,而不是 Vuex。
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')
bundles(包) 和 Vue 3 对齐
生成以下 bundles 向 Vue 3 的 bundles 对齐:
1. vuex.global(.prod).js
- 在浏览器中直接和
<script src="...">
一起使用。全局会暴露 Vuex 对象。 - 全局的构建是使用的 IIFE 的方式,而不是 UMD,并且这只能直接和
<script src="...">
一起使用。 - 包含硬编码的 prod/dev 分支,并且 prod 的构建结果已最小化。可以使用
.prod.js
文件用于生产。
2. vuex.esm-browser(.prod).js
- 用于浏览器原生的 ES module 的方式引入(包括通过
<script type="module">
支持浏览器的模块)
3. vuex.esm-bundler.js
- 适用于打包工具,例如 Webpack、Rollup 和 Parcel。
- 使用 prod/dev 分支会有
process.env.NODE_ENV
防护(guards)(即肯定会被该包所覆盖) - 不提供缩小的版本(打包后和其他代码一起完成)。
4. vuex.cjs.js
- 用于在 Node.js 使用
require()
的服务端渲染。
ComponentCustomProperties 的类型检测
Vuex 4 删除其在 Vue 组件中的 this.$store
的全局类型,以解决 issue #994.。当和 TypeScript 一起使用时,必须要声明自己所扩展的模块(module)。
将以下代码放在你的项目中,以保证正确的 this.$store
的类型检测:
// vuex-shim.d.ts
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
declare module '@vue/runtime-core' {
// Declare your own store states.
interface State {
count: number
}
interface ComponentCustomProperties {
$store: Store<State>
}
}
核心模块导出 createLogger 函数
在 Vuex 3,createLogger
函数是从 vuex/dist/logger
导出的,但是现在它被放入到核心包中。你可以直接从 vuex
包中引入该函数:
import { createLogger } from 'vuex'
我是五柳,喜欢创新、捣鼓源码,专注于 Vue3 源码、Vite 源码、前端工程化等技术分享,欢迎关注我的微信公众号:Code center。