分析比对vuex和store模式

ops/2024/12/13 3:43:18/

在 Vue 中,Vuex 和 store 模式 是两个不同的概念,它们紧密相关,主要用于管理应用的状态。下面我会详细介绍这两个概念,并通过例子帮助你更好地理解。

1. Vuex 是什么?

Vuex 是 Vue.js 的一个状态管理库,用于集中管理应用中所有组件的共享状态。它可以帮助我们在多个组件之间共享数据,并保持数据的统一性。Vuex 的核心思想是“单一数据源”,即整个应用的状态都集中保存在一个地方——store。

Vuex 的核心概念:

State(状态):保存应用的状态,类似于组件的 data。
Mutations(变更):改变 state 的唯一方式,mutations 是同步的操作。
Actions(行为):可以包含异步操作,最终会提交一个 mutation 来改变 state。
Getters(获取器):从 state 中派生出状态的计算值。
Modules(模块):Vuex 支持将 store 分割成模块,每个模块都有自己的 state、mutations、actions 和 getters。

Vuex 的基本用法:

// store.js
import { createStore } from 'vuex';const store = createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},getters: {doubledCount(state) {return state.count * 2;}}
});export default store;

然后在 Vue 组件中使用:

<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="incrementAsync">Increment Async</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['count'])},methods: {...mapActions(['increment', 'incrementAsync'])}
};
</script>

在这个例子中,store 管理了 count 的状态,mutations 用于同步修改 count,actions 用于异步修改 count,而 getters 提供了 doubledCount 这个派生状态。

问:其中…是什么?

在 Vue 中的 … 是 JavaScript 的扩展运算符(Spread Operator)。它可以将对象或数组的内容展开(解构),在 Vuex 的场景中,主要用于将 Vuex 的方法或状态映射到 Vue 组件中。

在 Vuex 中 … 的作用

当我们在 Vue 组件中需要访问 Vuex 的 state 或 actions 时,可以通过 mapState 和 mapActions 等辅助函数进行映射。这些辅助函数会返回一个对象,我们可以使用扩展运算符 … 将这个对象解构并合并到组件的 computed 或 methods 选项中。

举例说明

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';//不用...
export default {computed: {count() {return this.$store.state.counter; // 手动映射 state}},methods: {increment() {this.$store.dispatch('increment'); // 手动映射 action}}
};
</script>//使用...
export default {computed: {...mapState(['count']) // 自动映射 state},methods: {...mapActions(['increment']) // 自动映射 action}
};

在这里,我们使用 … 将 mapState 和 mapActions 返回的对象直接合并到 computed 和 methods 中。最终效果是一样的,但代码更加清晰简洁。

store 模式是什么?

store 模式(有时称为 “模块化 Store”)是 Vuex 的一种设计模式,指的是将 Vuex 的 state、mutations、actions 和 getters 分割到多个模块中,每个模块管理自己的一部分状态。这样可以帮助我们在大型应用中保持代码的结构清晰,方便维护。

模块化 store 示例:

// store/modules/user.js
export default {state: () => ({name: 'John'}),mutations: {setName(state, name) {state.name = name;}},actions: {updateName({ commit }, name) {commit('setName', name);}},getters: {uppercasedName(state) {return state.name.toUpperCase();}}
};// store/modules/cart.js
export default {state: () => ({items: []}),mutations: {addItem(state, item) {state.items.push(item);}},actions: {addItemToCart({ commit }, item) {commit('addItem', item);}},getters: {cartItemCount(state) {return state.items.length;}}
};// store/index.js
import { createStore } from 'vuex';
import user from './modules/user';
import cart from './modules/cart';const store = createStore({modules: {user,cart}
});export default store;

在这个例子中,我们将 user 和 cart 分成两个模块来管理它们各自的状态。store/index.js 中将这些模块合并为一个全局的 Vuex store。

使用时:

<template><div><p>User: {{ userName }}</p><p>Cart Items: {{ cartItemCount }}</p><button @click="addItemToCart({ name: 'Product 1' })">Add Item</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState({userName: state => state.user.name,cartItemCount: state => state.cart.cartItemCount})},methods: {...mapActions('cart', ['addItemToCart'])}
};
</script>

通过 mapState 和 mapActions,你可以访问和操作 user 和 cart 模块中的状态和行为。模块化的设计使得不同功能的状态和逻辑分开管理,代码更容易维护和扩展。


http://www.ppmy.cn/ops/141108.html

相关文章

Exp 智能协同管理系统-部门管理前端页面开发

一、需求分析 页面功能 提供部门信息的展示功能&#xff0c;数据以表格形式呈现&#xff0c;包含序号、部门名称、最后操作时间、操作&#xff08;编辑和删除&#xff09;列。用户可通过新增、编辑和删除功能&#xff0c;实现对部门数据的管理。数据动态加载&#xff0c;支持实…

使用Allure作为测试报告生成器(Java+Selenium)

背景 JAVA项目中原先用Jenkinsseleniumselenium grid来日常测试UI并记录。 问题 当某一个testSuite失败时&#xff0c;当需要确认UI regression issue还是selenium test case自身的问题&#xff0c;需要去jenkins中查log&#xff0c;一般得到的是“Can not find element xxx…

编程语言对决:Node.js与Python在视频处理领域

在当今的技术世界&#xff0c;视频处理是一个日益增长的需求&#xff0c;无论是在网络应用、数据分析还是桌面应用中。Node.js和Python都是流行的编程语言&#xff0c;它们各自拥有处理视频文件的能力&#xff0c;但它们在编程模型、内存管理和性能方面有所不同。本文将探讨这两…

【OpenCV】模板匹配

理论 模板匹配是一种在较大图像中搜索和查找模板图像位置的方法。为此&#xff0c;OpenCV 带有一个函数 cv.matchTemplate&#xff08;&#xff09; 。它只是在输入图像上滑动模板图像&#xff08;如在 2D 卷积中&#xff09;&#xff0c;并比较模板图像下的模板和输入图像的补…

关于SpringBoot项目创建后构建总是失败的问题

第一个问题&#xff1a;IDEA创建项目总是失败 原因&#xff1a;创建项目的时候默认使用的是https://start.spring.io&#xff0c;这个是一个外国网站&#xff0c;众所周知的就是国内访问总是出现不稳定的现象&#xff0c;这就是导致项目创建失败的最终原因。 解决方法&#x…

element-plus的el-tree的双向绑定

el-tree改造了下 可选可取消 有默认值 不包含父级id&#xff08;也可打开注释 包含父级id&#xff09; 默认展开 点击节点也可触发选择 节点内容自定义 <template><div class"absolute"><el-scrollbar class"pall"><div class"…

支持图像和视频理解多模态开源大模型:CogVLM2 CogVLM2-Video

CogVLM2和CogVLM2-Video是新一代的开源模型&#xff0c;支持图像和视频理解&#xff0c;具有显著的性能提升。最近发布的更新包括CogVLM2论文的发表、在线演示和对视频理解的支持&#xff0c;能够处理最多1分钟的视频。新模型支持中英文&#xff0c;文本长度可达8K&#xff0c;…

深度学习:MindSpore自动并行

随着模型规模的逐渐增大&#xff0c;需要的算力逐渐增强&#xff0c;但是算力需求增长速度远高于芯片算力增长速度。现在唯一的解决方案只有通过超大规模集群训练大模型。 大集群训练大模型的挑战 内存墙 200B参数量的模型&#xff0c;参数内存占用745GB内存&#xff0c;训练…