您可能不需要使用Vue 3的Vuex
Vuex是一个很棒的状态管理库。它很简单,并且可以与Vue很好地集成。为什么有人会离开Vuex?原因可能是即将发布的Vue 3版本暴露了底层的反应系统,并引入了构建应用程序的新方法。新的反应系统非常强大,可以用于集中式状态管理。
您是否需要共享状态?
在某些情况下,多个组件之间的数据流变得如此困难,以至于您需要集中式状态管理。这些情况包括:
使用相同数据的多个组件 具有数据访问权限的多个根 组件的深层嵌套 如果以上情况都不成立,那么不管您是否需要,答案都很简单。不用了
但是,如果您有以下一种情况呢?最直接的答案是使用Vuex。这是经过考验的解决方案,并且做得不错。
但是,如果您不想添加其他依赖项或发现设置过于复杂怎么办?新的Vue 3版本以及Composition API可以通过其内置方法解决这些问题。
新的解决方案
共享状态必须符合两个条件:
反应性:当状态改变时,使用它们的组件也应更新 可用性:可以在任何组件中访问状态 反应性 Vue 3通过众多功能公开了其反应系统。您可以使用reactive函数创建反应变量(替代方法是ref函数)。
import { reactive } from 'vue';
export const state = reactive({ counter: 0 });
从reactive函数返回的Proxy对象是可以跟踪其属性更改的对象。当在组件模板中使用时,每当无功值发生变化时,组件都会重新渲染自己。
<template>
<div>{{ state.counter }}</div>
<button type="button" @click="state.counter++">Increment</button>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ counter: 0 });
return { state };
}
};
</script>
可用性
上面的示例对于单个组件非常有用,但是其他组件无法访问状态。为了克服这个问题,您可以使用provide和inject方法在Vue 3应用程序中提供任何可用值。
import { reactive, provide, inject } from 'vue';
export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
stateSymbol,
createState()
);
当您将Symbolas键和一个值传递给该provide方法时,该方法中的任何子组件都可以使用该值inject。Symbol提供和检索值时,密钥使用相同的名称。
这样,如果您在最上面的组件上提供值,那么它将在所有组件中可用。或者,您也可以调用provide主应用程序实例。
import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');
<script>
import { useState } from './state';
export default {
setup() {
return { state: useState() };
}
};
</script>
使其坚固
上述解决方案有效,但有一个缺点:您不知道是谁修改了什么。状态可以直接更改,没有限制。
您可以通过使用readonly函数包装状态来使其受到保护。它在Proxy防止任何修改的对象中覆盖了传递的变量(尝试时会发出警告)。可以通过可访问可写存储的单独功能来处理突变。
import { reactive, readonly } from 'vue';
export const createStore = () => {
const state = reactive({ counter: 0 });
const increment = () => state.counter++;
return { increment, state: readonly(state) };
}
外部世界将只能访问只读状态,并且只有导出的函数才能修改可写状态。
通过保护状态免受不必要的修改,新解决方案相对接近Vuex。
摘要
通过使用Vue 3的反应性系统和依赖项注入机制,我们已经从本地状态转变为可以在较小的应用程序中替代Vuex的集中状态管理。
我们有一个状态对象,该对象是只读的,并且对模板的更改有反应。只能通过Vuex中的动作/突变等特定方法来修改状态。您可以使用computed函数定义其他获取器。
Vuex具有更多功能,例如模块处理,但有时我们不需要。
如果您想了解Vue 3并尝试这种状态管理方法,请查看我的Vue 3游乐场。
- C++ string类的学习
- R语言学习 - 非参数法生存分析
- 初学File类
- R语言学习 - 图形设置中英字体
- 递归思想解决输出目录下的全部文件
- Linux学习 - 又双叒叕一个软件安装方法
- 在Python中实现你自己的推荐系统
- 在Java中如何实现“Pless presss any key to continue.”
- 震惊小伙伴的Python单行代码
- 如何打造一款可靠的WAF(Web应用防火墙)
- 为啥我的Python这么慢 (一)
- 矩阵的基本知识构造重复矩阵的方法——repmat(xxx,xxx,xxx)构造器的构造方法单位数组的构造方法指定公差的等差数列指定项数的等差数列指定项数的lg等差数列sub2ind()从矩阵索引==》
- 简单的Writer和ReaderWriter的主要方法Writer工作原理Reader的主要方法readLine():String
- 为啥我的Python这么慢 - 项查找 (二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 老哥,您看我这篇Java集合,还有机会评优吗?
- 在 IDEA 中使用 Java 热部署插件 JRebel
- 后端必备 Git 分支开发:规范指南
- 大量的 TIME_WAIT 状态连接怎么处理?(文末有福利)
- 线上教育系统开发中,购物车功能是如何实现的?
- IntelliJ IDEA 2020.2重磅发布!全面支持Github PR。真香版本?
- 腾讯云智能语音小程序插件实现实时语音识别
- 我还在生产玩 JDK7,JDK 15 却要来了!|新特性尝鲜
- 36个助你成为专家需要掌握的JavaScript概念
- Bulehero 蠕虫病毒安全分析报告
- 一句话加速grep近30倍
- 正道的光!这有个用TensorFlow做的小黄图过滤器
- Bytom侧链Vapor源码浅析-节点出块过程
- Logstash: 启动监控及集中管理
- 渗透测试中文件上传技巧