Vue的状态管理Vux

文章目录

  • 一、介绍
  • 二、install
  • 三、store
    • 1、介绍
    • 2、创建并全局引入
    • 3、单一状态树
    • 4、多模块状态树(无命名空间)
    • 5、多模块状态树(有命名空间)


一、介绍

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
  • 当我们的应用遇到多个组件共享状态(共享状态:多个组件维护1个变量)时,单向数据流的简洁性很容易被破坏。多个组件互相传参将会非常繁琐,并且对于兄弟组件间的状态传递无能为力
  • vuex就是把多个组件共享状态(数据)抽取出来以一个全局单例模式管理,把共享的数据函数放进vuex中,任何组件都能获取状态或者触发行为

二、install

npm install vuex@next --save

三、store

1、介绍

  • 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新
    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

2、创建并全局引入

  • 创建src/store/index.js

  • main.js中全局注册

// 引入创建的store/index.js
import store from './store'// store注入到vue根实例
createApp(App).use(store)

3、单一状态树

  1. index.js
import {createStore} from 'vuex'export default createStore({// 1、共享的状态(数据),相似于datastate: () => ({user: {name: 'kimi',age: 18,honor: ['1-三好学生','1-优秀班干部','2-优秀班干部']}}),// 2、有时候我们需要从 state 中派生出一些状态,如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它,无论哪种方式都不是很理想// 只能读取state中的状态getters: {/*** 使用state - 获取个人荣誉的数量** @param state 上面的state* @returns*/getUserHonorNum(state) {return state.user.honor.length},/*** 使用getters** @param state* @param getters* @returns*/getUserAvgHonorNum(state, getters) {return getters.getUserHonorNum / 3},/*** 传入自定义参数** @param state* @param getters* @returns*/getUserAvgHonorNumber: (state, getters) => (year) => {return getters.getUserHonorNum / year}},// 3、更改 Vuex 的 store 中的状态(数据)的唯一方法是提交 mutation// mutation中必须是同步函数mutations: {/*** 使用state - 年龄+1** @param state*/setAgeIncrement(state) {state.user.age++},/*** 传入自定义参数 - 单个** @param state* @param age*/setAge(state, age) {state.user.age = age},/*** 传入自定义参数 - 多个(需使用对象)** @param state* @param user*/setUser(state, user) {state.user = user}},// 4、actions类似于mutation都是修改state中的状态,但是actions提交的是mutation,而不是直接变更state中的状态// actions可以包含任意异步操作actions: {/*** 年龄+1,异步操作,2秒之后再执行** @param context 与store实例具有相同方法和属性的对象(context.getters、context.commit、context.dispatch),但并不是store实例本身*/setAgeIncrement(context) {setTimeout(() => {context.commit('setAgeIncrement')}, 2000)},/*** 传入自定义参数 - 单个** @param context* @param age*/setAge(context, age) {context.commit('setAge', age)},/*** 传入自定义参数 - 多个(需使用对象)** @param context* @param user*/setUser(context, user) {context.commit('setUser', user)},/*** actions中的函数也可以调用actions中的其他函数** @param context*/setAgeAdd(context) {context.dispatch('setAgeIncrement').then(() => {context.commit('setAgeIncrement')})}},// 5、由于使用单一状态树,应用的所有状态会集中到一个比较大的对象(store/index.js会变得很大),store对象就会变的很臃肿,为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)modules: {}
})
  1. 组件中使用
<script setup>
import {useStore} from 'vuex'
const store = useStore()//1、访问state
store.state.user//2、访问getters
store.getters.getUserHonorNum
store.getters.getUserAvgHonorNumber(6)  //传入自定义参数//3、修改state中的状态,调用mutations中的函数
store.commit('setAgeIncrement')
store.commit({type: 'setAgeIncrement'})//对象风格的提交方式
store.commit('setAge', 30)//传入自定义参数 - 单个
store.commit('setUser', {name: 'sally', age: 20})//传入自定义参数 - 多个//4、修改state中的状态,调用actions中的函数(分发Action,Action通过store.dispatch方法触发,异步操作所以是回调方法)
store.dispatch('setAgeAdd').then(() => {})
//对象风格的提交方式
store.dispatch({type: 'setAgeIncrement'}).then(() => {})
//传入自定义参数 - 单个
store.dispatch('setAge', 20).then(() => {})
//传入自定义参数 - 多个
store.dispatch('setUser', {name: 'sally', age: 20}).then(() => {})
</script>

4、多模块状态树(无命名空间)

  • 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象(store/index.js会变得很大),store对象就会变的很臃肿,为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)
  • 不带命名空间时,模块内部的getter、mutation、action仍然是注册在全局命名空间的。必须注意,不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误
  1. 创建user模块(store/modules/user.js)
const user = {state: () => ({user: {name: 'kimi',age: 18,honor: ['1-三好学生','1-优秀班干部','2-优秀班干部']}}),getters: {/*** @param state 该模块中的state* @param getters 该模块中的getters* @param rootState 所有模块的state* @returns*/getUserHonorNum(state, getters, rootState) {return state.user.honor.length}},mutations: {/*** @param state 该模块中的state*/setAgeIncrement(state) {state.user.age++}},actions: {/*** @param context 与store实例具有相同方法和属性的对象(如下),但并不是store实例本身*  context.state*  context.getters*  context.commit*  context.dispatch*  context.rootState:所有模块的state*/setAgeIncrement(context) {setTimeout(() => {context.commit('setAgeIncrement')}, 2000)}}
}export default user
  1. index.js
import {createStore} from 'vuex'//引入user模块
import user from '@/store/modules/user'export default createStore({modules: {user}
})
  1. 组件中使用
<script setup>
import {useStore} from 'vuex'
const store = useStore()//1、访问state(模块名.共享数据)
store.state.user.user//2、不带命名空间时,模块内部的getter、mutation、action仍然是注册在全局命名空间的,所以访问这3个中的函数没有变化
store.getters.getUserHonorNum

5、多模块状态树(有命名空间)

  • 如果希望你的模块具有更高的封装度和复用性,你可以将模块添加带命名空间
  1. 创建user模块(store/modules/user.js)
const user = {// 带命名空间namespaced: true,state: () => ({user: {name: 'kimi',age: 18,honor: ['1-三好学生','1-优秀班干部','2-优秀班干部']}}),getters: {/*** @param state 该模块中的state* @param getters 该模块中的getters* @param rootState 所有模块的state* @param rootGetters 所有模块的getters* @returns*/getUserHonorNum(state, getters, rootState, rootGetters) {return state.user.honor.length}},mutations: {/*** @param state 该模块中的state*/setAgeIncrement(state) {state.user.age++}},actions: {/*** @param context 与store实例具有相同方法和属性的对象(如下),但并不是store实例本身*  context.state*  context.getters*  context.commit*  context.dispatch*  context.rootState:所有模块的state*  context.rootGetters 所有模块的getters*/setAgeIncrement(context) {setTimeout(() => {context.commit('setAgeIncrement')}, 1000)}}
}export default user
  1. index.js
import {createStore} from 'vuex'//引入user模块
import user from '@/store/modules/user'export default createStore({modules: {user}
})
  1. 组件中使用
<script setup>
import {useStore} from 'vuex'
const store = useStore()//1、访问state(模块名.共享数据)
store.state.user.user//2、访问模块中的getters(模块名/函数名)
store.getters['user/getAge']//3、访问模块中的mutations(模块名/函数名)
store.commit('user/setAgeIncrement')//4、访问模块中的actions(模块名/函数名)
store.dispatch('user/setAgeIncrement').then(() => {})

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

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

相关文章

Django笔记(六):DRF框架

首 前后端分离是互联网应用开发的标准使用方式&#xff0c;让前后端通过接口实现解耦&#xff0c;能够更好的进行开发和维护。 RESTful接口常见规范 在接口设计中&#xff0c;大家遵循一定的规范可以减少很多不必要的麻烦&#xff0c;例如url应有一定辨识度&#xff0c;可以…

精品代码,接稳了!EI顶刊复现:计及风电波动及电解槽运行特性的电氢混合储能容量优化配置程序代码!

适用平台/参考文献&#xff1a;MatlabYalmipCplex/Gurobi&#xff1b; 参考文献&#xff1a;中国电机工程学报首发论文《平抑风电波动的电-氢混合储能容量优化配置》 程序首先利用EMD将原始风电功率信号分解为直接并网分量和混合储能系统&#xff08;HESS&#xff09;功率任务…

算法训练营Day60(单调栈)

84.柱状图的最大矩形 84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 注意首尾加0的细节就可 class Solution {public int largestRectangleArea(int[] heights) {Deque<Integer> stack new LinkedList<>();int[] newHeight new int[heights.…

探索 Xind3 生态系统,解锁铭文资产的新玩法

铭文市场的兴起&#xff0c;不仅是新资产发行方案向市场的代表&#xff0c;更是新资产革命的代表。通过“公平启动”的方式&#xff0c;任何人都可以按照先到先得的原则“铸造”资产。虽然这看起来是意识形态上的新升级&#xff0c;但实际上最火的铭文风潮是由CEX引发的。 我们…

R语言【taxlist】——merge_taxa():整合概念和移除名称

Package taxlist version 0.2.4 Description 将分类概念合并为单个 taxlist 对象。 Usage merge_taxa(object, ...)## S3 method for class taxlist merge_taxa(object, concepts, level, print_output FALSE, ...) Arguments 参数【object】&#xff1a;taxlist 对象。 参…

Linux命令-apropos命令(在 whatis 数据库中查找字符串)

补充说明 apropos命令 在一些特定的包含系统命令的简短描述的数据库文件里查找关键字&#xff0c;然后把结果送到标 准输出。 如果你不知道完成某个特定任务所需要命令的名称&#xff0c;可以使用一个关键字通过Linux apropos实用程 序来搜索它。该实用程序可以搜索关键字并且…

nodejs实现grafana报表

实现grafana发送周报,目前了解到有三种方法, grafana-report(第三方)nodejs模块(第三方)grafana-reporting(grafana企业版)线上环境在dev-host-sys006机器上,就nodejs怎么实现grafana报表进行流程测试,预防出现问题不知道怎么排查 以下为测试 源码地址 https://github.…

Windows上安装Linux系统

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、WSL是什么&#xff1f;二、WSL安装步骤1.开启wsl支持2.安装wsl3.运行wsl4.环境配置 三、WSL删除引用 前言 提示&#xff1a;这里可以添加本文要记录的大概…

Dockerfile简介和基础实践

文章目录 1、Dockerfile简介1.1、Dockerfile解决的问题1.2、docker build 构建流程1.3、关键字介绍 2、Dockerfile 实践2.1、基本语法实践 --- golang2.1.1 问题检查 2.2、基本语法实践 --- gcc 总结 1、Dockerfile简介 Dockerfile是一个创建镜像所有命令的文本文件, 包含了一…

力扣541 反转字符串Ⅱ Java版本

文章目录 题目描述代码自己需要注意的地方 题目描述 给定一个字符串 s 和一个整数 k&#xff0c;从字符串开头算起&#xff0c;每计数至 2k 个字符&#xff0c;就反转这 2k 字符中的前 k 个字符。 如果剩余字符少于 k 个&#xff0c;则将剩余字符全部反转。 如果剩余字符小于…

STM32 PWM驱动设计

单片机学习&#xff01; 目录 文章目录 前言 一、PWM驱动配置步骤 二、代码示例及注意事项 2.1 RCC开启时钟 2.2 配置时基单元 2.3 配置输出比较单元 2.4 配置GPIO 2.5 运行控制 三、PWM周期和占空比计算 总结 前言 PWM本质是利用面积等效原理来改变波形的有效值。 一、PWM驱动…

C++初阶入门之命名空间和缺省参数的详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.前言 二.命名空间 2.1命名冲突的例子 2.2解决方案 2.3命…

操作Date时间方法

文章目录 1. 两个Date时间类型数值做对比1、使用Date类&#xff1a;2、使用LocalDateTime类&#xff1a; 2. 字符串转Date1、使用SimpleDateFormat类&#xff1a;2、使用DateTimeFormatter类&#xff1a; 3. new Date()格式化字符串 年月日4. 两个date数据类型相差天数1、 计算…

SPA单页面的讲解(超级详细)

目录 一、什么是SPA 二、SPA和MPA的区别 单页应用与多页应用的区别 单页应用优缺点 三、实现一个SPA 原理 实现 hash 模式 history模式 四、题外话&#xff1a;如何给SPA做SEO SSR服务端渲染 静态化 使用Phantomjs针对爬虫处理 一、什么是SPA SPA&#xff08;sin…

这是一片测试文章

这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 这是一片测试文章 真的是测试文章 -111122225555444433333333222211111 dddddaaa

❤css实用

❤ css实用 CSS渐变色边框&#xff08;Gradient borders方法的汇总 5种-代码可直接下载&#xff09; 资源链接 https://download.csdn.net/download/weixin_43615570/88779950?spm1001.2014.3001.5503 给 border 设置渐变色是很常见的效果&#xff0c;实现这个效果有很多思路…

近20k stars,GSYVideoPlayer一款优秀的视频播放器

近20k stars&#xff0c;GSYVideoPlayer一款优秀的视频播放器 引言 在现代社会中&#xff0c;视频已经成为人们获取信息和娱乐的重要形式。为了提供更好的观看体验&#xff0c;开发一款优秀的视频播放器变得至关重要。而GSYVideoPlayer作为一款功能强大、稳定可靠的视频播放器…

浙江机电职业技术学院第八届新生亮相赛(同步赛)D.一种很新的阶乘【线性筛+一分为二法】

原题链接&#xff1a;https://ac.nowcoder.com/acm/contest/73799/D 时间限制&#xff1a;C/C 2秒&#xff0c;其他语言4秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 夜雷很喜欢特别大的数字&#xff0c;曾经一度算阶乘…

没指定spring-boot-maven-plugin版本导致编译失败,这坑你踩过没

文章目录 1. 前言2. 组件版本信息3. 事件经过3.1 本地通过maven命令打包3.2 定位问题步骤3.2.1 核对spring-boot-maven-plugin版本信息3.2.2 spring-boot-maven-plugin版本错误原因 3.3 解决方案 4.结论 1. 前言 我们在平时开发过程中关注的比较多的是项目开发时依赖包的版本以…

lightdb object支持static函数

文章目录 背景介绍语法示例 背景 在信创适配中&#xff0c;从Oracle迁移过来的程序使用STATIC函数。为此LightDB从24.1版本开始&#xff0c;对该功能进行了支持。 介绍 LightDB 24.1版本中对象方法包括下列几种&#xff1a; MEMBER方法&#xff1a;MEMBER方法可以被对象实例…