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

Souleigh ✨ 等级 539 0 0

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

Vuex 4 正式版本现已发布。

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

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

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

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

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

要查看文档,请访问:

next.vuex.vuejs.org

重大更改

安装流程已更改

为了与新的 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.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'

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

  • 导出缺少的 storeKey(4ab2947)

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

收藏
评论区

相关推荐

vue高级进阶系列——用typescript玩转vue和vuex
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式: im
通过一个简单实例了解vuex
简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex 就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。 Vuex 4 正式版本现已发布。 Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3,并提供了与 Vuex 3 完全相同的
了解Vuex状态管理模式
1 Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢? vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 1.mvvm 框架是什么? 2.vuerout
vue: 解决vuex页面刷新数据丢失问题
一、问题描述 1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。 2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
记录Vue项目实现axios请求头带上token
在vue项目中首先 npm 命令安装 axios: npm install axios Saxios 的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化 vuexpersistedstate 插件保存数据npm i S vuexpersistedstateimport persistedStat
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters
1、mapState和mapGetters的作用      mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,muta
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 Vuex,它的思想和React 的R
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Python基础4——模块与包
12 模块与包模块通俗地理解为.py文件,里面定义了变量、函数和类。需要的时候就可以导入这些模块。执行步骤1. 在python模块加载路径中查找相应的模块文件2. 将模块文件编译成中间代码3. 执行模块文件中的代码 12.1 模块分类1. 内置模块,也叫标准库,比如说random,time,大概有200多个2. 第三方模块,也称为第三方库,使用pip ins