Vue基础之Vuex状态管理

个人名片:
😊作者简介:一名大二在校生
🤡 个人主页:坠入暮云间x
🐼
座右铭: 给自己一个梦想,给世界一个惊喜。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

  • 什么是Vuex?
    • Vuex优势有哪些?
    • 如何使用Vuex?
      • 1.安装 vuex
      • 2.新建 `store/index.js` 专门存放 vuex
      • 3.创建仓库 `store/index.js`
      • 4 在 main.js 中导入挂载到 Vue 实例上
      • 5.测试打印Vuex
    • State
      • 如何通过$store访问语法?
        • 1.模板中使用
        • 2.组件逻辑中使用
        • 3. js文件中使用
    • mapState辅助函数
      • 1.导入mapState (mapState是vuex中的一个函数)
      • 2.采用数组形式引入state属性
      • 3.利用**展开运算符**将导出的状态映射给计算属性
    • mapMutations 辅助函数
    • Mutations
      • Mutations 传参
    • actions
      • 定义actions
      • 组件中通过dispatch调用
    • getters
    • 总结

什么是Vuex?

Vuex 是一个 Vue 的 状态管理工具,状态就是数据。
大家可以理解为:Vuex是一个插件,他是可以帮助我们管理vue数据
比如:购物车数据,个人信息

Vuex 同样遵循单向数据流,组件中不能直接修改仓库的数据

Vuex优势有哪些?

  • 共同维护一份数据,数据集中化管理
  • 响应式变化
  • 操作简洁 (vuex提供了一些辅助函数)

    注意💥
  • 不是所有的场景都适用于vuex,只有在必要的时候才使用vuex
  • 使用了vuex之后,会附加更多的框架中的概念进来,增加了项目的复杂度 (数据的操作更便捷,数据的流动更清晰)

如何使用Vuex?

1.安装 vuex

安装vuex与vue-router类似,vuex是一个独立存在的插件,如果脚手架初始化没有选 vuex,就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

2.新建 store/index.js 专门存放 vuex

​ 为了维护项目目录的整洁,在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)在这里插入图片描述

在这里插入图片描述

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
const store = new Vuex.Store()// 导出仓库
export default store

4 在 main.js 中导入挂载到 Vue 实例上

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

此刻起, 就成功创建了一个 空仓库!!

5.测试打印Vuex

App.vue

created(){console.log(this.$store)
}

State

作用:存储数据
State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件,在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别:// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})

如何通过$store访问语法?

首先应该获取 store
1.Vue模板中获取 this.$store
2.js文件中获取 import 导入 store

模板中: {{ $store.state.xxx }}
组件逻辑中: this.$store.state.xxx
JS模块中: store.state.xxx

1.模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例,可通过state属性属性获取count, 如下

<h1>state的数据 - {{ $store.state.count }}</h1>
2.组件逻辑中使用
<h1>state的数据 - {{ count }}</h1>// 把state中数据,定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}
3. js文件中使用
//main.js
import store from "@/store"
console.log(store.state.count)

mapState辅助函数

mapState是辅助函数,帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法
在这里插入图片描述

1.导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.采用数组形式引入state属性

mapState(['count']) 

上面代码的最终得到的是 类似于

count () {return this.$store.state.count
}

3.利用展开运算符将导出的状态映射给计算属性

  computed: {...mapState(['count'])}
 <div> state的数据:{{ count }}</div>

mapMutations 辅助函数

mapMutationsmapState很像,它把位于mutations中的方法提取了出来,将mutations的方法导入了methods中

import  { mapMutations } from 'vuex'
methods: {...mapMutations(['addCount'])
}

通过this.addCount调用了

<button @click="addCount">值+1</button>

注意: Vuex中mutations中要求不能写异步代码,如果有异步的ajax请求,应该放置在actions中

Mutations

作用: mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化),

const store  = new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {}
})

mutations是一个对象,对象中存放修改state的方法

mutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state) {state.count += 1}},

调用Mutations,在使用如下代码进行提交

this.$store.commit('addCount')

Mutations 传参

提交 mutation 是可以传递参数的 this.$store.commit('xxx', 参数)

mutations: {...addCount (state, count) {state.count = count}
},

actions

作用:actions负责进行异步操作

定义actions

作用:实现异步方法
定义:

actions:{
abc(store,val) {
setTimeout(() => {store.commit(updateAge', val) }, 2000)
} }

组件中直接使用:

<button @click="$store.dispatch(‘abc’,30)">xxx</button>

组件中借助于辅助方法使用:

<button @click="abc(40)>xxx</button>
import { mapActions } from 'vuex
methods:{
...mapActions(['abc'])
}

组件中通过dispatch调用

setAsyncCount () {this.$store.dispatch('setAsyncCount', 666)
}

在这里插入图片描述

getters

作用:计算属性
定义:

getters:
abc(state) {
return 计算的结果'

组件中直接使用:

<p>{$store.getters.abcl}</p>

组件中借助于辅助方法使用:

<p>{abc }</p>
import {mapGetters } from 'vuex
computed: {
...mapGetters(['abc])

总结

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它集中存储应用的所有组件共享的状态,并以可预测的方式修改状态。Vuex 基本上由四个核心概念组成:

  1. State(状态): 在 Vuex 中,状态被存储在一个单一的对象中,即 state。可以将 state 看作是应用程序中需要共享的数据。组件可以直接从 state 中获取数据,但不能直接修改 state。

  2. Getters(获取器): Getters 允许组件从 store 中获取状态,并对其进行一些处理,然后将其返回。可以将 getter 看作是 store 的计算属性。Getters 可以被传递参数,并且可以在其他 getter 内部使用。

  3. Mutations(变化): Mutations 是唯一改变状态的方法。每个 mutation 都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数接收 state 作为第一个参数,一个可选的 payload 作为第二个参数。要触发一个 mutation,需要调用 store.commit 方法并传入相应的事件类型。

  4. Actions(动作): Actions 类似于 mutations,不同之处在于 Actions 提交的是 mutations,而不是直接变更状态。Actions 可以包含任意异步操作。要触发一个 action,需要调用 store.dispatch 方法并传入相应的事件类型。

最后,使用 Vuex 需要先创建一个 store 并将其注入到应用程序中(通常在根组件中进行)。在组件中可以通过 this.$store 访问全局的状态。通过 mutations 和 actions 来改变状态,并且通过 getters 来获取状态。Vuex 管理应用中的共享状态,让状态的变化变得可追踪、可调试,也让跨组件状态共享变得更容易。

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

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

相关文章

Jira自动化的实用工具——ScriptRunner简介及最佳实践

近日&#xff0c;龙智举办的DevSecOps研讨会年终专场“趋势展望与实战探讨&#xff1a;如何打好DevOps基础、赋能创新”在上海圆满落幕。龙智Atlassian技术与顾问咨询团队&#xff0c;以及清晖、JamaSoftware、CloudBees等生态伙伴的嘉宾发表了主题演讲&#xff0c;分享他们在D…

免费分享一套SpringBoot+Vue体育馆(预约)管理系统,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue体育馆(预约)管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue体育馆(预约)管理系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue体育馆(预约)管理系统 Java毕…

【高通camera hal bug分析】高通自带相机镜像问题

首先打了两个log&#xff0c;一个是开启镜像的log&#xff0c;还有一个是没有开启镜像的log&#xff0c;如果我们开启镜像以后&#xff0c;观察开启镜像log发现 , 这段代码走的没有任何问题&#xff0c;因为Flip的值等于1了。 关闭镜像log如下&#xff1a; 如果我们不开启镜像…

java中常用的查询算法

1、线性查找 直接从左往右遍历&#xff0c;有则返回 适合数组或链表 public static void main(String[] args) {int[] arr { 12, 34, 32, 56, 78, 23, 34, 56, 67 };int num 34;System.out.println(fangno(arr, num));}public static ArrayList fangno(int[] arr, int num…

Java集合八股文总结

Java集合八股文总结 Collection Set TreeSet 基于红黑树实现&#xff0c;支持有序性操作&#xff0c;例如根据一个范围查找元素的操作。但是查找效率不如 HashSet&#xff0c;HashSet 查找的时间复杂度为 O(1)&#xff0c;TreeSet 则为 O(logN)。HashSet 基于哈希表实现&…

Linux下的系统字体分类

在上次解决Avalo在/usrnia启动问题的时候涉及到了字体&#xff0c;因此特意了解了一下&#xff0c;/share/fonts/目录下存储了不同类型的字体文件&#xff0c;其各代表的意义如下&#xff1a; 我使用的是ubuntu20.04版本&#xff0c;该目录下的文件夹有&#xff1a; /usr/shar…

Google 在 MySQL 中推进矢量搜索,在 LLM 支持方面超越 Oracle

谷歌已将向量搜索引入其 MySQL 数据库服务&#xff0c;这一步领先了 MySQL 的所属公司 Oracle&#xff0c;迄今为止&#xff0c;Oracle 尚未给 MySQL 添加任何大型语言模型&#xff08;LLM&#xff09;方面的功能。 谷歌云数据库副总裁安迪古特曼斯 (Andi Gutmans) 表示&#…

el-form表单中,对非表单内字段增加校验的方法

1、问题说明&#xff1a; 在开发表单的时候&#xff0c;可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。 此时用prop绑定该字段名是无效的&#xff0c;需要单独对这个字段进行校验。 在el-form-item中有一个属性 error 。用于表单域验证错误信息&#xff0c;设…

Java SE入门及基础(37)

Object 类常用方法 Object类中定义的方法大多数都是属于 native 方法&#xff0c; native 表示的是本地方法&#xff0c;实现方式是在 C 中。 1. getClass() public final Class getClass () //The getClass() method returns a Class object, which has methods you can…

【算法】KY67 整数奇偶排序

描述 输入10个整数&#xff0c;彼此以空格分隔。重新排序以后输出(也按空格分隔)&#xff0c;要求: 1.先输出其中的奇数,并按从大到小排列&#xff1b; 2.然后输出其中的偶数,并按从小到大排列。 输入描述&#xff1a; 任意排序的10个整数&#xff08;0&#xff5e;100&#x…

灰度发布难以追踪?你可能用错了工具

灰度发布进行可观测性的主要方式是通过收集和分析用户在使用新版本产品或服务时的数据&#xff0c;以此来评估新版本的性能、稳定性和用户满意度。这个过程通常包括以下几个步骤&#xff1a; 定义观测指标&#xff1a;首先&#xff0c;需要定义一套合适的观测指标&#xff08;…

Java Day7 常用API

文章目录 1、Arrays1.1 简述1.2 如何比较对象数组1.2.1 方法1.1.2.2 方式2 2、Lambda3、方法引用3.1 静态方法的引用3.2 实例方法引用3.3 特定类型方法引用3.4 构造器引用 1、Arrays 1.1 简述 操作数组的一个工具类 常见方法 int[] arr{10,20,30,50,40};//将 数组的内容 组…

彩色gif闪图怎么做?分享gif动画的方法

在现在的媒体时代&#xff0c;动态图片已经成为了最流行的分享信息的方式。能够传达动态的视觉效果。那种带有动态效果的闪动文字图片要怎么制作呢&#xff1f;很简单&#xff0c;通过使用在线制作闪字图片工具&#xff0c;上传多张文字内容相同&#xff0c;颜色、位置不同的jp…

【网络原理】使用Java基于TCP搭建简单客户端与服务器通信

目录 &#x1f384;API介绍&#x1f338;ServerSocket API&#x1f338;Socket API &#x1f340;TCP中的长短连接&#x1f333;建立TCP回显客户端与服务器&#x1f338;TCP搭建服务器&#x1f338;TCP搭建客户端 ⭕总结 TCP服务器与客户端的搭建需要借助以下API &#x1f384;…

C语言函数—库函数

函数是什么&#xff1f; 数学中我们常见到函数的概念。但是你了解C语言中的函数吗&#xff1f; 维基百科中对函数的定义&#xff1a;子程序 在计算机科学中&#xff0c;子程序&#xff08;英语&#xff1a;Subroutine, procedure, function, routine, method, subprogram, ca…

VSCode调试C++项目时无法显示长字符串的所有内容

记录一次失败的尝试&#xff0c;参考解决vs code 调试golang时字符串显示不全的问题。_golang gin buf数据不全-CSDN博客 但是笔者当前使用的VSCode版本不支持在launch.json中添加dlvLoadConfig选项 笔者的思路是如果VSCode不支持&#xff0c;那就下降到下一层&#xff0c;VSC…

c++初阶------类和对象(下)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

判断、v-if判断显示隐藏,功能区循环案例。

判断条件 1.第一种 如果身份是管理员 &#xff0c; 那么全部显示 如果身份是员工 &#xff0c;那么除了value等于1的全部都显示 v-if"( user.state.level admin) || ( user.state.level staff && item.value ! 1)"<view class"funcBox">&…

Solidity Uniswap V2 factory contract

factory contract 工厂合约是所有已部署pair合约的注册表。我们不希望出现相同的pair&#xff0c;这样流动性就不会被分割成多个。factory合约还简化了pair合约的部署&#xff1a;无需手动部署pair合约&#xff0c;只需调用factory合约中的方法即可。 https://github.com/XuHug…

马斯克将在本周,开源类ChatGPT产品Grok

3月11日晚&#xff0c;马斯克在社交平台宣布&#xff0c;将在本周开源生成式AI产品——Grok。 Grok是马斯克旗下公司xAI在去年11月发布的&#xff0c;一款类ChatGPT产品&#xff0c;可以提供生成文本、代码、邮件、信息检索等功能。其测试性能超过GPT-3.5、LLaMA 2 70B&#x…