Vuex 4 正式发布!

598 阅读2分钟

本文由五柳翻译、润色,原文地址

这是 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