写点什么

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:005011

评论

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

整合Mybatis、Servlet、Mysql、Axios、Filter、Session写一个入门级项目:非常适合初接触JavaWeb的小白白来进阶

游坦之

MySQL mybatis javaWeb Servlet 11月月更

Baklib知识分享|知识管理中常用的5种工具

Baklib

【SpringBoot】@Enable*注解和@Import

游坦之

spring-boot 11月月更

模块六-拆分电商系统为微服务

Geek_b35d92

微服务 拆分

分布式锁:不同实现方式实践测评

闫同学

Go 分布式 后端 分布式锁 11月月更

【JavaWeb】 Mybatis-01-Mybatis的简介:用对话的方式让你明白为什么要使用Mybatis

游坦之

mybatis javaWeb 11月月更

【JavaWeb】 Mybatis-02-Mybatis的快速入门

游坦之

mybatis javaWeb 11月月更

Titus网关中的缓存一致性机制

俞凡

架构 netflix 大厂实践

软件设计与体系结构 实验二 经典软件体系结构风格(二)

游坦之

设计模式 11月月更

计算机网络(一):计算机网络概念、功能、组成

游坦之

计算机网络 11月月更

运维进阶训练营 -W05H

b1a2e1u1u

运维

【JavaWeb】JSP学习笔记

游坦之

javaWeb jsp 11月月更

【JavaWeb】 一文搞懂Request

游坦之

javaWeb Request 11月月更

【JavaWeb】 Mybatis-03-Mybatis代理开发

游坦之

mybatis javaWeb 11月月更

实验六 设计模式

游坦之

设计模式 11月月更

基于一段神奇的CSS渐变制作噪点效果

南城FE

CSS 前端 css特效 渐变

【设计模式】适配器模式:攻敌三分,自留七分,以超兽武装的例子来谈谈适配器模式

游坦之

软件工程 设计模式 11月月更

【JavaWeb】过滤器和监听器,就这?

游坦之

javaWeb filter 11月月更

【JavaWeb】会话的学习笔记:Cookie和Session的知识点,这一次我总算学明白了

游坦之

javaWeb session 11月月更

【JavaWeb】一文搞懂Response

游坦之

javaWeb Response 11月月更

2022-11-27:超过经理收入的员工。编写一个SQL查询来查找收入比经理高的员工。以下数据的结果输出是Joe,因为Joe是唯一挣得比经理多的雇员。 DROP TABLE IF EXISTS `em

福大大架构师每日一题

MySQL 数据库 福大大

极客时间运维进阶训练营第五周作业

忙着长大#

极客时间

电商系统微服务拆分设计

π

架构师实战营

一文弄懂Vue与Servlet的交互:让你的大学课设变得容易起来

游坦之

Vue axios 11月月更

【Servlet】这一文详细的讲述了Servlet的知识,呕心沥血,终于文成。

游坦之

javaWeb Servlet 11月月更

【Tomcat】贰-Tomcat集成到Idea:解放双手,让Tomcat的操作没有那么难用

游坦之

tomcat javaWeb 11月月更

软件设计体系 实验一 经典软件体系结构风格

游坦之

设计模式 11月月更

基于 Pipeline 实现完整的代码部署流水线

忙着长大#

【SpringBoot】引入mybatis及连接Mysql数据库

游坦之

spring-boot 11月月更

Vue复刻华为官网(三)

游坦之

Vue 11月月更

ELK 各组件功能及Elasticsearch 的节点角色类型介绍

忙着长大#

ELK

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