当前位置: 首页 > news >正文

vue、vuex状态管理、vuex的核心概念state状态

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vuex初步使用

1、安装vuex

口诀:“233”、“344”

数字分别对应,“vue版本,vue 路由版本、vuex 版本”。

所以这里了使用vuex3版本:

yarn add vuex@3

 

 2、创建仓库文件

 编写如下:

// 这个文件用于存放vuex的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 插件安装
Vue.use(Vuex)// 创建仓库
const store = new Vuex.Store()// 导出仓库,把仓库丢到main.js
export default store

 3、在main.js中导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store/index'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),store
}).$mount('#app')

 4、验证仓库是否被创建成功

    created () {console.log('222222')console.log(this.$store)},

控制台打印:

这个对象就是我们的仓库了



使用state仓库的数据

state是vuex的核心。

状态目标:明确如何给仓库提供数据。

如何使用仓库的数据?方式有两种:

1、通过store直接访问

步骤1:提供数据State

提供唯一的公共数据源,所有共享的数据都要统一放到 Store中的 State中存储。在 state对象中可以添加我们要共享的数据。

步骤2:获取数据:

示例:

1、在我们的vuex仓库中添加共享的数据

// 这个文件用于存放vuex的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 插件安装
Vue.use(Vuex)// 创建仓库
const store = new Vuex.Store({// 通过提供数据,这些数据被所有的组件共享state: {title: '公共的标题',count: 100}
})// 导出仓库,把仓库丢到main.js
export default store

2、在我们的页面中获取数据

  <h1>{{ $store.state.title }}</h1>

2、通过辅助函数访问

简化mapstate是辅助函数,帮助我们把 store中的数据自动映射到组件的计算属性中。

 

步骤1:

  import { mapState } from 'vuex'// console.log(mapState(['count','title']))// 我们可以在计算属性中展开mapState

步骤2:

    computed: {...mapState(['count', 'title'])},

步骤3:

我们可以像使用vue的data中的数据一样,去使用计算属性中的变量。

   <h1>{{ title }}</h1>

 

 3、严格模式

明确νuex同样遵循单向数据流,组件中不能直接修改仓库的数据通过 strict:true可以开启严格模式

// 创建仓库
const store = new Vuex.Store({// 严格模式: 如果每个组件都可以修改数据,一旦项目打了,开发人员多了,就很难维护了// 可以使用严格模式来让vuex修改数据,修改后,vuex在通知我们的组件,更新数据。// 有利于初学者,检测不规范的代码=>上线时需要关闭strict: true,// 通过提供数据,这些数据被所有的组件共享state: {title: '公共的标题',count: 100}
})

 4  mutations的操作流程

state数据的修改只能通过 mutations。

1、仓库index.js

const store = new Vuex.Store({strict: true,state: {title: '公共的标题',count: 100},mutations: {// 所有 mutation函数,第一个参数,都是 stateaddCount (state) {state.count += 1}}
})

 2、在页面中使用我们的mutations

      handleAddCount(){this.$store.commit('addCount')}
     <button @click="handleAddCount">值 + 1</button>

 

5  mutations传参语法

需要注意的是,如果要传递多个参数,我们需要把多个参数丢到对象当中,像传递一个参数一样,把对象传递给我们定义的mutations函数 。

6  辅助函数: mapmutations

目标:掌握辅助函数 mapmutations,映射方法mapmutations和 mapstate很像,它是把位于 mutations中的方法提取了出来,映射到组件 methods中

mapmutations相当于3.1的辅助写法,只是把方法捞到了methods当中了。

7 actions (异步操作)

目标:明确 actions的基本语法,处理异步操作,

需求:一秒钟之后,修改 state的 count成666。

说明: mutations必须是同步的(便于监测数据变化,记录调试。

 步骤1:修改仓库index.js

  mutations: {changeTitle (state, newTitle) {state.title = newTitle}},
  // 3.actions 处理异步// context上下文(此处未分模块,可以当成 store仓库)//  context, commit(" mutation名字,额外参数)actions: {asynChangeTitle (context, newTitle) {// setTimeout方法是异步的,3秒钟之后换成我们的新标题setTimeout(()=>{context.commit('changeTitle',newTitle)},3000)}}

这里,actions是mutations的同级对象。

步骤2: 测试

    <button @click="handleChangeTitle">3秒之换标题</button>
    methods: {handleChangeTitle () {// 调用action//this.$store.dispatch('我们vuex仓库中的action的名字','额外参数')this.$store.dispatch('asynChangeTitle','这是3秒钟之后的新标题')}},

 

总结:和前面的“mutations传参语法”目录类似,只是多了actions这个中间人 ,this.$store.commi换成了this.$store.dispatch。

8 getters

getters类似于计算属性。说明:除了 state之外,有时我们还需要从 state中派生出一些状态,这些状态是依赖 state的,此时会用到 getters。

例如: statel中定义了list,为1-6的数组,组件中,需要显示所有大于3的数据

步骤1:

getters和state同级

  getters: {filterList (state) {return state.list.filter(item => item > 3)}},

步骤2:

在组件内使用:

  import { mapState,mapGetters } from 'vuex'
    computed: {//mapState和mapGetters都是映射属性...mapState(['count', 'title']),...mapGetters(['filterList'])},

9 模块 module(进阶语法)

9.1 获取module的数据

项目大,代码就多了,store的文件内存上千行代码,很难维护,不易管理。

module的存在就是为了解决这个问题的。

步骤1:

在store目录下建一个新目录modules,在modules下建两个js文件,user.js,setting.js,如下:

// setting.js
const state = {theme: 'blue',desc: 'deom'
}
const mutations = {}const actions = {}const getters = {}export default {state,mutations,actions,getters
}
// user.js
const state = {name: 'Mike',hobby: '唱、跳、Rap'
}
const mutations = {}const actions = {}const getters = {}export default {state,mutations,actions,getters
}

步骤2、把user.js,setting.js导入到store目录下的index.js文件中:

import settings from './modules/settings'
import user from './modules/user'

 mudules对象和state对象同级:

  modules:{settings,user}

步骤3 使用modules下的数据:

modules的子模块的状态,还是会挂到根级别的 state使用模块中的数据

①直接通过模块名访问$ store. state模块名.XXX

②通过 mapstate映射

默认根级别的映射 mapstate(['XXX'])子模块的映射 mapstate('模块名',['XXX']) -

需要开启命名空间

export default {state,mutations,actions,getters,namespaced:true
}
 ①直接通过模块名访问$store.state.模块名.XXX
     <span>爱好: {{ $store.state.user.hobby }}</span>

②通过mapstate映射
  <span>(mapState)爱好: {{ user.hobby }}</span>
    computed: {//mapState和mapGetters都是映射属性...mapState(['count', 'title','settings','user']),...mapGetters(['filterList'])},

 9.2 修改module模块下的数据

步骤1、定义mutaion

const mutations = {setUserInfo(state,newHobby){state.hobby = newHobby}
}
    methods: {updateUserInfo () {// this.$store.commit('模块名/mutation名',参数)this.$store.commit('user/setUserInfo','唱、跳、Rap、Smile')}},
        <button @click="updateUserInfo"> 修改爱好信息 </button><span>爱好: {{ user.hobby }}</span>

 点击按钮前:

 点击按钮后的页面:

 

相关文章:

vue、vuex状态管理、vuex的核心概念state状态

每一个 Vuex 应用的核心就是 store&#xff08;仓库&#xff09;。“store”基本上就是一个容器&#xff0c;它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同&#xff1a; Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候&…...

【QT】Qt Application Manager启动应用源码分析

Qt Application Manager启动应用源码分析 Qt Application Manager&#xff08;以下简称QTAM&#xff09;是QT推出的一款应用管理程序&#xff0c;可以把它简单理解成Android的LauncherSystemUI。但是&#xff0c;QTAM又集成了Wayland功能&#xff0c;并且自身实现了一套Compos…...

MyBatisPlus(十)判空查询

说明 判空查询&#xff0c;对应SQL语句中的 IS NULL语句&#xff0c;查询对应字段为 NULL 的数据。 isNull /*** 查询用户列表&#xff0c; 查询条件&#xff1a;电子邮箱为 null 。*/Testvoid isNull() {LambdaQueryWrapper<User> wrapper new LambdaQueryWrapper<…...

AIGC(生成式AI)试用 8 -- 曾经的难题

长假&#xff0c;远离电脑、远离手机、远离社交。 阴雨连绵&#xff0c;望着窗外发呆&#xff0c;AIGC为何物&#xff1f;有什么问题要问AIGC&#xff1f;AIGC可以代替我来发呆&#xff0c;还是可是为我空出时间发呆&#xff1f; 如果可以替代我发呆&#xff0c;要我何…...

文化主题公园旅游景点3d全景VR交互体验加深了他们对历史文化的认知和印象

如今&#xff0c;沉浸式体验被广泛应用于文旅行业&#xff0c;尤其是在旅游演艺活动中。在许多城市&#xff0c;沉浸式旅游演艺活动已成为游客“必打卡”项目之一。因其独特体验和强互动性&#xff0c;这类演艺活动不仅吸引了外地游客&#xff0c;也吸引了本地观众。 随着信息化…...

京东数据分析平台:2023年8月京东奶粉行业品牌销售排行榜

鲸参谋监测的京东平台8月份奶粉市场销售数据已出炉&#xff01; 鲸参谋数据显示&#xff0c;8月份京东平台上奶粉的销售量将近700万件&#xff0c;环比增长约15%&#xff0c;同比则下滑约19%&#xff1b;销售额将近23亿元&#xff0c;环比增长约4%&#xff0c;同比则下滑约3%。…...

Java 21:虚拟线程介绍

Java 21 版本更新中最重要的功能之一就是虚拟线程 (JEP 444)。这些轻量级线程减少了编写、维护和观察高吞吐量并发应用程序所需的工作量。 正如我的许多其他文章一样&#xff0c;在推出新功能之前&#xff0c;让我们先看看 Java 21 版本更新前的现状&#xff0c;以便更好地了解…...

Redis-缓存穿透,缓存击穿,缓存雪崩

缓存穿透&#xff0c;缓存击穿&#xff0c;缓存雪崩 缓存穿透处理方案解决方案1 缓存空数据解决方案2 布隆过滤器 缓存击穿处理方案解决方案 1 互斥锁解决方案2 逻辑过期 缓存雪崩处理方案解决方案 1 给不同的key的过期时间设置添加一个随机值&#xff0c;降低同一个时段大量ke…...

如何使用Docker实现分布式Web自动化!

01、前言 顺着docker的发展&#xff0c;很多测试的同学也已经在测试工作上使用docker作为环境基础去进行一些自动化测试&#xff0c;这篇文章主要讲述在docker中使用浏览器进行自动化测试如果可以实现可视化&#xff0c;同时可以对浏览器进行相关的操作。 02、开篇 首先我们…...

从零开始:制作出色的产品原型图的详细教程

在设计产品的初始版本或模型时&#xff0c;产品原型起着非常重要的作用&#xff0c;可以帮助设计师和团队更好地了解产品需求和用户需求&#xff0c;优化和改进设计&#xff0c;确保设计最终满足用户的需求和期望。如果你不知道如何绘制产品原型图&#xff0c;绘制产品原型图的…...

美国访问学者签证如何申请加急办理?

许多中国学者梦想着前往美国深造&#xff0c;积累更多的学术经验和知识。然而&#xff0c;签证申请过程可能会变得复杂和繁琐&#xff0c;特别是如果你需要在紧急情况下前往美国。但别担心&#xff0c;本文知识人网小编将为您介绍美国访问学者签证加急办理的一些建议和步骤。 首…...

33 WEB漏洞-逻辑越权之水平垂直越权全解

目录 前言水平&#xff0c;垂直越权&#xff0c;未授权访问Pikachu-本地水平垂直越权演示(漏洞成因)墨者水平-身份认证失效漏洞实战(漏洞成因)原理越权检测-Burpsuite插件Authz安装测试(插件使用)修复防御方案 前言 越权漏洞文章分享&#xff1a;https://www.cnblogs.com/zhen…...

【FreeRTOS】【STM32】02 FreeRTOS 移植

基于 [野火]《FreeRTOS%20内核实现与应用开发实战—基于STM32》 正点原子《STM32F429FreeRTOS开发手册_V1.2》 准备 基础工程&#xff0c;例如点灯 FreeRTOS 系统源码 FreeRTOS 移植 上一章节已经说明了Free RTOS的源码文件在移植时所需要的&#xff0c;FreeRTOS 为我们提供…...

STM32F4X 内部FLASH使用

STM32F4X 内部FLASH使用 STM32F4X 内部FLASHSTM32F4X内部FLASH结构STM32F40X和STM32F41X内部FLASH结构STM32F42X和STM32F43X内部FLASH结构 STM32F4X内部FLASH操作例程internal_flash.hinternal_flash.cmain.c 在嵌入式开发中&#xff0c;经常需要实时保存一些数据。如果工程的代…...

减小windows或linux虚拟机导出ova体积大小

减小windows或linux虚拟机导出ova体积大小 删除无用的文件&#xff0c;比如日志或者命令&#xff0c;程序等&#xff1b;去除磁盘碎片将不用的内存空间填充为0&#xff0c;便于vmdk压缩。 例子&#xff1a; 日志文件置空&#xff1a; 批量置空 /sf/data/log/ 目录下的日志文…...

WPF livecharts 折线图遮挡数字问题

在WPF里使用livecharts&#xff0c;如果折线图或者柱状图有多个的时候&#xff0c;可能会出现两个数字遮挡问题&#xff0c;这时候要设置DataLabelsTemplate 属性。 如LineSeries设置代码如下&#xff1a; 第一个折线图的DataLabelsTemplate var stackPanelFactory new Fra…...

电力系统数字化升级改造之配电室无人值守

随着科技的不断进步&#xff0c;电力系统的数字化升级改造已成为必然趋势。其中&#xff0c;配电室的无人值守是其中重要的一环。 配电室是电力系统的重要组成部分&#xff0c;其运行状态直接影响到电力系统的稳定性和可靠性。然而&#xff0c;传统的配电室存在很多问题&am…...

集合Set

目录 一、去重问题 一、去重问题 题目描述&#xff1a; 小明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性他先用计算机生成了N个1&#xff5e;1000之间的随机整数(N<1000),N是用户输入的&#xff0c;对于其中重复的数字&#xff0c;只保留一个&am…...

TCP/IP(二)导论

一 知识铺垫 以下内容参照 <<电子科技大学TCPIP协议原理>>全 ① 协议和标准 一组规则&#xff1a; 交通规则、学生上学的学生守则等;数据通信的规则,有一个专门的名称叫作协议 protocol语义&#xff1a;具体描述在通信当中,每一个信息的具体含义. 二进制bit流…...

Java之UDP,TCP的详细解析

练习四&#xff1a;文件名重复 public class UUIDTest { public static void main(String[] args) { String str UUID.randomUUID().toString().replace("-", ""); System.out.println(str);//9f15b8c356c54f55bfcb0ee3023fce8a } } public class Client…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...