限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

Vuex 4 正式发布:打包现在与 Vue 3 一致

  • 2021-02-05
  • 本文字数:1317 字

    阅读完需:约 4 分钟

Vuex 4 正式发布:打包现在与 Vue 3 一致

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。


Vuex 4 正式版本现已正式发布。


Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的 API,因此用户可以在 Vue 3 中重用现有的 Vuex 代码。


这个版本还包含一些重大更改,详情见后文。


关于 Option 和 Composition API 的基本用法,请参见 example 目录。


新版还是用 NPM 包发布,放在 next 标签下,和 Vue 3 是一样的。我们计划在 Vue 3 拿掉 next 标签后一并移除 Vuex 4 的 next 标签。


社区为 Vuex 4 的稳定版做出了许多贡献,感谢大家的帮助。

文档

要查看文档,请访问Vuex 官网

重大更改

安装流程已更改

为了与新的 Vue 3 初始化流程保持一致,Vuex 的安装流程已更改。


用户要创建新的 store 实例时,推荐使用新引入的 createStore 函数。


import { createStore } from 'vuex'export const store = createStore({  state() {    return {      count: 1    }  }})
复制代码


从技术上来讲这并不是一个重大更改,不过你还是可以使用 newStore(...)语法,我们建议大家用这种方法来和 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')
复制代码

打包现在与 Vue 3 一致

新版会生成以下包,以同 Vue 3 包一致:


  • vuex.global(.prod).js

  • 在浏览器中直接用于<scriptsrc="...">。全局公开 Vuex。

  • 全局构建是作为 IIFE 而不是 UMD 构建的,并且只能与<scriptsrc="...">直接共用。

  • 包含硬编码的 prod/dev 分支,并且 prod 构建已预先最小化。使用.prod.js 文件用于生产。

  • vuex.esm-browser(.prod).js

  • 用于原生 ES 模块导入(包括通过<script type="module">支持模块的浏览器。)

  • vuex.esm-bundler.js

  • 用于 webpack、rollup 和 parcel 等打包器。

  • 带有 process.env.NODE_ENV 防护的 prod/dev 分支不受影响(必须由打包器代替)。

  • 不提供缩小的构建(打包后与剩余代码一起处理)。

  • vuex.cjs.js

  • 用于带有 require()的 Node.js 服务端渲染。

ComponentCustomProperties 的类型化

Vuex 4 删除了其在 Vue 组件中 this.$store 的全局类型,以解决问题 #994。与 TypeScript 一起使用时,用户必须声明自己的模块扩充。


将以下代码放在你的项目中,以使 this.$store 正确类型化:


// vuex-shim.d.tsimport { 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'
复制代码

4.0.0-rc.2 后加入的错误修复

  • 导出缺少的 storeKey(4ab2947)

  • 修复在 Webpack 包中无法摇树的问题(#1906)(#1907)(aeddf7a)


原文链接:


https://github.com/vuejs/vuex/releases

2021-02-05 12:005023

评论

发布
暂无评论
发现更多内容

2020年6月26日 查询性能优化

瑞克与莫迪

架构师训练营第三周命题作业

lwy

极客大学架构师训练营

架构训练营第四周 - 作业

无心水

极客大学架构师训练营

Docker基础修炼2--Docker镜像原理及常用命令

黑马腾云

Docker Linux 容器 运维 镜像

极客大学架构师训练营 系统架构 第7课 听课总结

John(易筋)

极客时间 系统架构 高并发 极客大学 极客大学架构师训练营

基于阿里云服务网格(ASM)的GRPC服务部署实践

韩陆

Kubernetes gRPC Service Mesh

区块链的应用为什么这么难?出路在哪?

CECBC

比特币 区块链技术 Token 联盟共识

【总结】企业级案例驱动 打造高可用、高并发、多IDC部署业务中台微服务架构

魔曦

极客大学架构师训练营

ARTS week3

姜海天

过早优化是万恶之源

非著名程序员

程序员 程序人生 提升认知

二叉树深度优先遍历

封不羁

Java 算法 二叉树

辟谣:程序员不配谈恋爱?你错的可以!真相来了

码农神说

程序员 漫画 相亲

新手村:Redis基础补充知识

多选参数

数据库 redis 数据库设计 redis6.0.0

近两年流行面试题:Spring循环依赖问题

Java小咖秀

spring 面试 ioc

区块链系列教程之:比特币中的挖矿

程序那些事

比特币 区块链 挖矿

centos7 操作

InfoQ_1c4a1f813eb1

测试阶段发现缺陷多怎么办?

洪永潮

Why Spring ???

猴哥一一 cium

Java spring 源码 Spring Boot 框架设计

从0开始设计Flutter独立APP | 第一篇: 数据库与状态管理

渔子长

flutter 大前端 跨平台

为什么哈希表可以管理亿级数据?

八两

php redis hash rehash

面试官:我们来聊下锁吧

root

Java 乐观锁 悲观锁

架构师训练营第三周学习总结

lwy

架构师训练营第四周-总结

无心水

极客大学架构师训练营

创业一定要学投资

Neco.W

创业 投资

[译]都0202年了,你还觉得go-scheduler很难理解吗?

卓丁

golang scheduler GPM goroutines Go 语言

MySQL InnoDB 存储引擎 - 锁

Axe

​外包公司干了不到3个月,我离职了...(防坑指南)

程序员生活志

程序员 外包 工作经历

ARTS WEEK4

紫枫

ARTS 打卡计划

抖音、腾讯、阿里、美团春招服务端开发岗位硬核面试(完结)

aoho

面试 后端 阿里

WPF中的Data Binding调试指南

大白技术控

.net 微软 WPF

架构师第4周

上山砍柴

极客大学架构师训练营

Vuex 4 正式发布:打包现在与 Vue 3 一致_语言 & 开发_Geek_8lftp9_InfoQ精选文章