Vuex 4 正式发布

内容简介：Vuex 4 已正式发布，此版本的更新重点是提供更好的兼容性。从 release note 可以看到，Vuex 4 不但支持 Vue 3，并且提供与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中重用其现有的 Vuex 代码。 虽然 Vuex 4...

Vuex 4 已正式发布，此版本的更新重点是提供更好的兼容性。从 release note 可以看到，Vuex 4 不但支持 Vue 3，并且提供与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中重用其现有的 Vuex 代码。

虽然 Vuex 4 将兼容性放在了首位，但此版本依旧包括部分破坏性变化，下边简单介绍一下。

安装过程已更改

为了与新的 Vue 3 初始化过程保持一致，Vuex 的安装过程已更改。举个例子，如果需要创建一个新的 store 实例，现在会鼓励用户使用新引入的createStore功能。

import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      count: 1
    }
  }
})

尽管从技术上来讲这并不是一个破坏性变化，开发者仍可以使用new Store(...)语法，但官方表示建议将该方法与 Vue 3 和 Vue Router 4 保持一致。

要将 Vuex 安装到一个 Vue 实例，需要传递实例而非 Vuex。

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

打包与 Vue 3 一致

新版本会生成以下的包，以与 Vue 3 打包保持一致：

• vuex.global(.prod).js
• vuex.esm-browser(.prod).js
• vuex.esm-bundler.js
• vuex.cjs.js

ComponentCustomProperties类型化

Vuex 4 删除其this.$store在 Vue Component 中的全局类型以解决 issue #994。与 TypeScript 一起使用时，必须声明自己的模块扩充 (module augmentation)。

将以下代码放在项目中以允许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'

此外还包括两个 Bugfix：

• 修复导出缺少storeKey的错误(4ab2947)
• 修复 webpack 包中的 tree shaking 无法运行的错误 (#1906) (#1907) (aeddf7a)

下载地址：https://github.com/vuejs/vuex/releases/tag/v4.0.0

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• NPM包（模块）发布、更新、撤销发布
• 有赞灰度发布与蓝绿发布实践
• 【重磅发布】Linkis 0.10.0 版本发布
• BeetlSQL 3.0.9 发布，Idea 插件发布
• 贝密游戏 0.7.0 发布，发布斗地主
• 【重磅发布】DataSphere Studio 0.9.0 版本发布

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。