- 第1节:Vue 3.0 安装
- 第2节:Vue 3.0 介绍
- 第3节:Vue 3.0 应用&组件实例
- 第4节:Vue 3.0 模板语法
- 第5节:Vue 3.0 Data Property和方法
- 第6节:Vue 3.0 计算属性和侦听器
- 第7节:Vue 3.0 Class与Style绑定
- 第8节:Vue 3.0 条件渲染
- 第9节:Vue 3.0 列表渲染
- 第10节:Vue 3.0 事件处理
- 第11节:Vue 3.0 表单输入绑定
- 第12节:Vue 3.0 组件基础
- 第13节:Vue 3.0 组件注册
- 第14节:Vue 3.0 Props
- 第15节:Vue 3.0 非Prop的Attribute
- 第16节:Vue 3.0 自定义事件
- 第17节:Vue 3.0 插槽
- 第18节:Vue 3.0 提供/注入
- 第19节:Vue 3.0 动态组件&异步组件
- 第20节:Vue 3.0 模板引用
- 第21节:Vue 3.0 处理边界情况
- 第22节:Vue 3.0 过渡&动画概述
- 第23节:Vue 3.0 进入过渡&离开过渡
- 第24节:Vue 3.0 列表过渡
- 第25节:Vue 3.0 状态过渡
- 第26节:Vue 3.0 混入
- 第27节:Vue 3.0 自定义指令
- 第28节:Vue 3.0 Teleport
- 第29节:Vue 3.0 渲染函数
- 第30节:Vue 3.0 插件
- 第31节:Vue 3.0 响应性 深入响应性原理
- 第32节:Vue 3.0 响应性 基础
- 第33节:Vue 3.0 响应式 计算和侦听
- 第34节:Vue 3.0 组合式API 介绍
- 第35节:Vue 3.0 组合式API Setup
- 第36节:Vue 3.0 组合式API 生命周期钩子
- 第37节:Vue 3.0 组合式API 提供/注入
- 第38节:Vue 3.0 组合式API 模板引用
- 第39节:Vue 3.0 渲染机制和优化
- 第40节:Vue2中的更改检测警告
- 第41节:Vue 3.0 单文件组件
- 第42节:Vue 3.0 测试
- 第43节:Vue 3.0 TypeScript支持
- 第44节:Vue 3.0 Mobile
- 第45节:Vue 3.0 路由
- 第46节:Vue 3.0 状态管理
- 第47节:Vue 3.0 服务端渲染
- 第48节:Vue 3.0 应用配置
- 第49节:Vue 3.0 应用API
- 第50节:Vue 3.0 全局API
- 第51节:Vue 3.0 选项 Data
- 第52节:Vue 3.0 选项 DOM
- 第53节:Vue 3.0 选项 生命周期钩子
- 第54节:Vue 3.0 选项/资源
- 第55节:Vue 3.0 选项 组合
- 第56节:Vue 3.0 选项 杂项
- 第57节:Vue 3.0 实例property
- 第58节:Vue 3.0 实例方法
- 第59节:Vue 3.0 指令
- 第60节:Vue 3.0 特殊指令
- 第61节:Vue 3.0 内置组件
- 第62节:Vue 3.0 响应性基础 API
- 第63节:Vue 3.0 响应性API Refs
- 第64节:Vue 3.0 响应性API Computed与watch
- 第65节:Vue 3.0 组合式API
Vue 3.0 状态管理
类 Flux 状态管理的官方实现
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试 (time travel debugging)。
#React 的开发者请参考以下信息
如果你是来自 React 的开发者,你可能会对 Vuex 和 Redux 间的差异表示关注,Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层,所以它能够轻松的通过一些[简单绑定_blank_nofollow](https://classic.yarnpkg.com/en/packages?q=redux vue&p=1)和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合,同时提供简洁的 API 和改善过的开发体验。
#简单状态管理起步使用
经常被忽略的是,Vue 应用中响应式 data
对象的实际来源——当访问数据对象时,一个组件实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,你可以使用一个 reactive 方法让对象作为响应式对象。
const sourceOfTruth = Vue.reactive({
message: 'Hello'
})
const appA = Vue.createApp({
data() {
return sourceOfTruth
}
}).mount('#app-a')
const appB = Vue.createApp({
data() {
return sourceOfTruth
}
}).mount('#app-b')
<div id="app-a">App A: {{ message }}</div>
<div id="app-b">App B: {{ message }}</div>
现在当 sourceOfTruth
发生变更,appA
和 appB
都将自动地更新它们的视图。我们现在只有一个真实来源,但调试将是一场噩梦。我们应用的任何部分都可以随时更改任何数据,而不会留下变更过的记录。
const appB = Vue.createApp({
data() {
return sourceOfTruth
},
mounted() {
sourceOfTruth.message = 'Goodbye' // both apps will render 'Goodbye' message now
}
}).mount('#app-b')
为了解决这个问题,我们采用一个简单的 store 模式:
const store = {
debug: true,
state: Vue.reactive({
message: 'Hello!'
}),
setMessageAction(newValue) {
if (this.debug) {
console.log('setMessageAction triggered with', newValue)
}
this.state.message = newValue
},
clearMessageAction() {
if (this.debug) {
console.log('clearMessageAction triggered')
}
this.state.message = ''
}
}
需要注意,所有 store 中 state 的变更,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。
此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
<div id="app-a">{{sharedState.message}}</div>
<div id="app-b">{{sharedState.message}}</div>
const appA = Vue.createApp({
data() {
return {
privateState: {},
sharedState: store.state
}
},
mounted() {
store.setMessageAction('Goodbye!')
}
}).mount('#app-a')
const appB = Vue.createApp({
data() {
return {
privateState: {},
sharedState: store.state
}
}
}).mount('#app-b')
TIP
重要的是,注意你不应该在 action 中替换原始的状态对象——组件和 store 需要引用同一个共享对象,变更才能够被观察到。
接着我们继续延伸约定,组件不允许直接变更属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 变更,同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。