Vuex 4.0 正式发布！新年，官方生态齐聚一堂。

Vuex 4 官方版本正式发布。

Vuex 4 的重点是兼容性。Vuex 4 支持 Vue 3，但是仍然提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue 3 中直接复用他们现有的 Vuex 代码。

下文会把破坏性的改动列出来，请注意查看。

在源码的 example 文件夹[1]可以看到 Optional 和 Composition API 下的基本用法。

它仍然和 Vue 3 一样在 NPM 包的 next 标签下发布，我们计划在 Vue3 准备好的时候移除 next 标签。

为了 Vuex 4 的稳定发布，大家齐心协力做出了很多贡献。非常感谢你们的帮助。若不是有如此出色的 Vue 社区，根本不可能实现这一切！

文档

请访问 next.vuex.vuejs.org[2] 查看文档。

破坏性变动

安装流程更改

为了和 Vue3 的初始化流程一致，Vuex 的安装流程有所改动。

我们建议用户用新的 createStore 函数来建立一个 store 实例。

import { createStore } from "vuex";export const store = createStore({state() {return {count: 1,};},
});

同时这在技术上并不是一个破坏性的改动，你依然可以用 new Store(...) 语法，不过我们推荐你用新语法，这样可以和 Vue3 以及 Vue Router 4 保持一致。

在 Vue 实例上安装 Vuex，传递 store 即可。

import { createApp } from "vue";
import { store } from "./store";
import App from "./App.vue";const app = createApp(App);app.use(store);app.mount("#app");

构建产物和 Vue3 一致

以下的构建产物可以和 Vue3 的产物保持一致：

  • vuex.global(.prod).js

    • 直接在浏览器中使用 <script src="...">，暴露全局 Vuex 变量。

    • 全局构建会被打包成 IIFE，并不是 UMD，仅用于直接使用 <script src="..."> 引入。

    • 包含了硬编码的 prod/dev 分支判断，prod.js 是压缩后的，在生产环境记得使用这个文件。

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

    • 为了使用 native ES module imports（需要浏览器支持 es module 用法，<script type="module">）

  • vuex.esm-bundler.js

    • 为了通过 webpack, rollup, percel 等构建工具使用模块。

    • 保留 prod/dev 分支判断和 process.env.NODE_ENV 判断（这个变量需要被构建工具替换）

    • 并不会提供 minified 版本（构建工具可以引入后一起处理）

  • vuex.cjs.js

    • 为了使用 Node.js 服务端渲染时通过 require() 导入。

类型 ComponentCustomProperties

Vuex 4 移除了为了推导 this.$store 而编写的全局类型，解决了 issue #994[3]，在使用 TypeScript 时，你必须自己手动添加模块类型声明。

在项目中使用如下的代码，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 中导出，现在它被包含在核心包中了，你可以直接这样导入：

import { createLogger } from "vuex";

自 4.0.0-rc.2 以来的 Bug 修复

  • 未导出 storeKey(4ab2947[4])

  • 修复 webpack 中 tree shaking 未生效 (#1906[5]) (#1907[6]) (aeddf7a[7])

原文发布地址

https://github.com/vuejs/vuex/releases/tag/v4.0.0

参考资料

[1]

源码的 example 文件夹: https://github.com/vuejs/vuex/tree/v4.0.0/examples

[2]

next.vuex.vuejs.org: https://next.vuex.vuejs.org/

[3]

issue #994: https://github.com/vuejs/vuex/issues/994

[4]

4ab2947: https://github.com/vuejs/vuex/commit/4ab294793a2c20ea6040f01f316618682df61fff

[5]

#1906: https://github.com/vuejs/vuex/issues/1906

[6]

#1907: https://github.com/vuejs/vuex/issues/1907

[7]

aeddf7a: https://github.com/vuejs/vuex/commit/aeddf7a7c618eda7f316f8a6ace8d21eb96c29ff

推荐阅读

若川知乎高赞：有哪些必看的 JS库？
我在阿里招前端，我该怎么帮你？（现在还可以加模拟面试群）
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点，该如何做出？
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答：2年前端经验，做的项目没什么技术含量，怎么办？

末尾

你好，我是若川，江西人，历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野，回复"pdf" 领取优质前端书籍pdf，回复"1"，可加群长期交流学习

  2. 我的博客地址：https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错，可以 分享、点赞、在看 呀^_^另外欢迎留言交流～

小提醒：若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮，欢迎点击阅读，也可以星标我的公众号，便于查找

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/276201.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

原生js实现给指定元素的后面追加内容

原生js实现给指定元素的后面追加内容

参考链接&#xff1a;http://www.jb51.net/article/35412.htm 原生js实现给指定元素的后面追加内容 var header1 document.getElementById("header"); var p document.createElement("p"); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有…
阅读更多...
文档中根元素后面的标记格式必须正确。

文档中根元素后面的标记格式必须正确。

文档中根元素后面的标记格式必须正确。 php或其它语言动态输出的xml&#xff0c;最开始<标记 前面有空格&#xff0c;最后面>标记 后面有 空格 导致xml解析出错 解决办法: var data:String evt.target.data;//兼容FireFox, php输出的xml data data.substr(data…
阅读更多...
lstm数学推导_如何在训练LSTM的同时训练词向量？

lstm数学推导_如何在训练LSTM的同时训练词向量？

你本来也不用自己手动进行词向量更新啊&#xff0c;你搞这么一出最后收敛到0那不是必然的么&#xff1f; 霍华德 老师的答案已经给你推导出来了。实际上你问的这个问题很简单——只要把Embedding层本身也当成模型参数的一部分就可以了&#xff0c;一开始不使用外部词向量&#…
阅读更多...
Javascript在页面加载时的执行顺序(转载）

Javascript在页面加载时的执行顺序(转载）

原文&#xff1a;http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一、在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属性制定外部的js文件放在事件处理程序中&a…
阅读更多...
TClientDataSet[27]: 字段值的约束(或叫输入限制)

TClientDataSet[27]: 字段值的约束(或叫输入限制)

Required、Precision、MaxValue、MinValue:begin{ Required: 必填字段 }with TIntegerField.Create(Self) do beginFieldName : ID;Required : True;DataSet : ClientDataSet1;end;{ Precision: 浮点数精度}with TFloatField.Create(Self) do beginFieldName : Float;Precision…
阅读更多...
年度总结文章的抽奖结果公布

年度总结文章的抽奖结果公布

大家好&#xff0c;我是若川。2月4日&#xff0c;发表了我的2020年度总结文章《若川的2020年度总结&#xff0c;水波不兴》&#xff0c;本以为阅读量应该突破一千会比较快&#xff0c;实际上比较艰难&#xff0c;而且还掉粉10来人。2020年运营公众号以来&#xff0c;不知不觉发…
阅读更多...
php 正则表达式 匹配中日韩字符（GBK）

php 正则表达式 匹配中日韩字符（GBK）

转载链接&#xff1a;http://www.cnblogs.com/ITEagle/archive/2013/01/14/2859775.html 首先是这些非英文字符的编码范围&#xff1a; 这里是几个主要非英文语系字符范围 2E80&#xff5e;33FFh&#xff1a;中日韩符号区。收容康熙字典部首、中日韩辅助部首、注音符号、日本假…
阅读更多...
linux多线程求和_linux 多线程信号处理总结

linux多线程求和_linux 多线程信号处理总结

linux 多线程信号总结(一)1. 在多线程环境下&#xff0c;产生的信号是传递给整个进程的&#xff0c;一般而言&#xff0c;所有线程都有机会收到这个信号&#xff0c;进程在收到信号的的线程上下文执行信号处理函数&#xff0c;具体是哪个线程执行的难以获知。也就是说&#xff…
阅读更多...
Elon Musk

Elon Musk

人物事件 成长学习 1971年6月28日&#xff0c;埃隆马斯克在南非的比勒陀利亚出生&#xff0c;他的 埃隆马斯克 父亲是一名南非机电工程师&#xff0c;母亲是加拿大人&#xff0c;从事营养师兼模特。[8] 1981年&#xff0c;10岁的马斯克就拥有了自己的第一台电脑&#xff0c;并…
阅读更多...
真诚推荐这7个大佬的公众号，碎片化学习

真诚推荐这7个大佬的公众号，碎片化学习

逆水行舟&#xff0c;不进则退。我们的工作已经占用了大块的时间了&#xff0c;剩下的只有各种碎片&#xff0c;最适合碎片时间学习的&#xff0c;莫过于优质的技术干货公众号啦~以下这些是小编精选&#xff0c;里面有很多资讯和资源&#xff0c;内含干货&#xff0c;希望能给大…
阅读更多...
[转]Windows 7 产品密钥是否安全

[转]Windows 7 产品密钥是否安全

提到Windows 7&#xff08;或Windows Server 2008&#xff09;有些人认为自己的产品密钥&#xff08;Product Key&#xff09;很安全&#xff0c;甚至在公司内部有些网管也认为公司部署的Windows 7 系统的密钥不会泄露。但其实并非如此&#xff0c;众所周知我们的密钥都是写在注…
阅读更多...
HttpWatch的Result中出现Aborted的原因分析[配图]

HttpWatch的Result中出现Aborted的原因分析[配图]

转载链接&#xff1a;http://www.cnblogs.com/yutiansanshou/archive/2013/02/01/2889486.html 我们在使用HttpWatch进行Web调试的过程中有时候会看到非HTTP Status Code&#xff08;状态码&#xff09;的值&#xff0c; 例如&#xff1a;(Aborted)。 (Aborted)是HttpWatch中定…
阅读更多...
android显示布局边界的边距_Android设计规范 Material Design-Layout（2 度量与边框）

android显示布局边界的边距_Android设计规范 Material Design-Layout（2 度量与边框）

度量与边框基准网络所有组件都与间隔为8dp的基准网格对齐。排版/文字(Type)与间隔为4dp的基准网格对齐。在工具条中的图标同样与间隔为4dp的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。有关详细信息请参见组件一节。有关详细信息请参见字体排版一节。边…
阅读更多...
《大规模分布式系统架构与设计实战》

《大规模分布式系统架构与设计实战》

《大规模分布式系统架构与设计实战》 基本信息 作者&#xff1a; 彭渊 丛书名&#xff1a; 大数据技术丛书 出版社&#xff1a;机械工业出版社 ISBN&#xff1a;9787111455035 上架时间&#xff1a;2014-2-21 出版日期&#xff1a;2014 年2月 开本&#xff1a;16开 页码&…
阅读更多...
WINDOWS下的squid

WINDOWS下的squid

今天写这篇教程目的在于分享自己在WINDOWS主机下配置squid的方法。哪些地方写的不完善或是不完整或是需要修改的地方&#xff0c;大家可以提出。我会第一时间纠正。下面看正文部分。先提条件&#xff0c;您预安装配置squid的这台计算机必须是联入网络的&#xff0c;系统版本是w…
阅读更多...
Provide/inject 真的可以取代 Vuex 吗？

Provide/inject 真的可以取代 Vuex 吗？

Hello&#xff0c;各位小伙伴&#xff0c;接下来的一段时间里&#xff0c;我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布&#xff0c;由于课程的问题大多数都是开放性的问题&#xff0c;所以我的答案也不一定是标准的&#xff0c;仅供你参考喔。…
阅读更多...
php 计算代码执行时间

php 计算代码执行时间

转载链接&#xff1a;http://blog.csdn.net/php_boy/article/details/6450678 class runtime {var $StartTime 0;var $StopTime 0;function get_microtime(){list($usec, $sec) explode( , microtime());return ((float)$usec (float)$sec);}function start(){$this->S…
阅读更多...
参数方程求二阶偏导_偏微分方程

参数方程求二阶偏导_偏微分方程

常微分方程&#xff08;ODE&#xff09; 的时候我们更多是关于时间的导数。偏微分方程&#xff08;partial differential equation) 则不仅仅是与时间相关&#xff0c;加上了与空间位置相关的一些信息。解当 ODE 满足 利普希茨连续&#xff08;Lipschitz continuity&#xff09…
阅读更多...
Spring Batch 批量处理策略

Spring Batch 批量处理策略

为了帮助设计和实现批量处理系统&#xff0c;基本的批量应用是通过块和模式来构建的&#xff0c;同时也应该能够为程序开发人员和设计人员提供结构的样例和基础的批量处理程序。当你开始设计一个批量作业任务的时候&#xff0c;商业逻辑应该被拆分一系列的步骤&#xff0c;而这…
阅读更多...
CString原理介绍

CString原理介绍

看了很多人写的程序,包括我自己写的一些代码&#xff0c;发现很大的一部分bug是关于MFC类中的CString的错误用法的.出现这种错误的原因主要是对CString的实现机制不是太了解。 CString是对于原来标准c中字符串类型的一种的包装。因为&#xff0c;通过很长时间的编程&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023