36-使用vuex对组件代码的优化(使用了mapState、mapActions、mapMutations、mapGetters)

最新推荐文章于 2021-08-14 09:06:36 发布
最新推荐文章于 2021-08-14 09:06:36 发布
阅读量131 收藏
点赞数
分类专栏： Vue尚硅谷学习旅程 文章标签： vue.js vue
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/A_Bow/article/details/114304566
版权

作用：

  简化代码

方法：

  只在app.vue文件中进行修改优化。
  vuex中的map取代了 this.$ store为前缀的代码，例如：this.$ store.dispatch(消息名) 、this.$ store.getters.消息名。

代码示例：

在这里插入图片描述
在这里插入图片描述
本篇是在 链接: 35-vue中vuex(实现组件的集中管理)的介绍和使用.
代码的基础上进行了优化。

不许人间见秃头xbw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
m0_58656423的博客
05-19 2429
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
40-vue-在根据每个组件中的数据写成vuex时，注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)
code^_^熊的博客
03-07 578
1.vuex是全局的，所有组件都可以和它通信。 2.getters对象中没有this，应该用getters来取代this 图片示例 3.高级计算属性(包含get、set)   组件中get方法对应vuex中的getters对象。   组件中set方法写成了vuex中的actions。 4.mapState、mapGetters   mapState：组件中获得state对象中的共享状态。   mapGetters：组件中获得vuex中的和共享状态有关的计算属性 (例如：假若数组是共享的状态，那数组的长度这
优化vuex的状态流写法按需加载每个模块
08-10
对vuex功能的一个增强，简化了状态流程的写法。增加按需引入model的控制
VueX优化
mhblog的博客
10-22 316
1.#mapGetters 辅助函数 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性： //首先导入mapGetters import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherG
Vuex代码优化--数据表现
AsaZyf的博客
12-10 348
一、state 优化前： 优化后： ... 表示展开运算符，mapState表示把Vuex里面的数据映射到computed，把city公用数据映射到city的计算属性之中 也可以另起名字： 二、mutations ...
vue项目笔记（21）-vuex代码优化
从零出发
08-16 710
vuex代码优化 在使用vuex的项目代码中，html中往往会出现{{this.$store.state.city}}这种代码，很不规范。vuex中给出了部分api可以对此进行优化。 mapState home/compoments/Header.vue中{{this.$store.state.city}}修改为{{this.city}}，引入mapState，并设置计算属性。 ...
使用vuex缓存数据并优化自己的vuex-cache
12-11
需求： 请求接口之后，缓存当前接口的数据，下次请求同一接口时拿缓存数据，不再重新请求 添加缓存失效时间 cache使用map来实现 ES6 模块与 CommonJS 模块的差异 CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。 因为esm输出的是值的引用，直接就是单例模式了 详细 export let cache = new Cache() 版本1 思路： 在vuex注册插件，插件会在每次mutations提交之后，判断要不要写入cache 在提交actions的时候判断是
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
08-27
使用这些概念，Vuex提供了`mapState`、`mapGetters`、`mapActions`和`mapMutations`辅助函数，它们帮助开发者便捷地在组件中绑定和调用这些状态和方法。例如，`mapState`可以让组件直接绑定到store中的状态，而`...
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在这个"vuex-demo"项目中，我们将重点探讨Vuex中的四个核心辅助函数：`mapState`、`mapGetters`、`mapActions`和`mapMutations`，它们极大地简化了Vuex与Vue组件之间的交互。 1. **mapState** `mapState`是一个辅助...
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
08-27
Vuex 中的 MapState、MapGetters、MapMutations、MapActions 的作用详解 Vuex 是一个状态管理模式，用于帮助开发者更好地管理应用程序中的状态。Vuex 中提供了多种方式来帮助开发者管理状态，其中包括 MapState、...
vuex使用之详解过程到优化
qq_36958916的博客
11-05 493
概念： vuex是一个专门为vue.js应用程序开发的状态管理模式 采用集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可预测的方式发生变化 组件与组件之间的关系变成了组建跟仓库之间的关系）。 使用场景： 购物车的数据共享，登入注册 使用方法： 1，安装vuex： npm install vuex --save 2，src目录下创建一个store文件夹，=>index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(V
vue刷新保留store中的内容
m0_51282855的博客
08-14 826
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store")))) } // //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListe
【Vue】replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题
Milk~每天分享一点点，技术进步一点点
10-24 1291
replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题（状态丢失） 文件目录 利用 pagehide 事件在用户刷新页面时将vuex的store存入sessionstorage中，然后在页面加载时，从sessionstorage中获取，replaceState store created() { // 在页面加载时读取sessionStorage里的状态信息 let store = window.sessionStorage.get
为什么有些vue项目推荐使用Vuex进行管理？VueX的基本使用方法
wang_9909的博客
06-17 1169
Vue是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享。
深入理解vuex
xtaydwxf1988的专栏
05-04 3762
创建一个基本的vuex流程 1、在项目中新建一个文件夹store 用来存入vuex创建的所有文件夹 文件夹中包函以下几块 文件名称 描述 store.js 定义初始变量，以及导出方法 如exprot default new Vuex.Store({state,actions,getters,muations}) a
vuex中mapState、mapMutations、mapAction的理解
热门推荐
清风了了的博客
06-04 3万+
// 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为
vue3学习—state的变化和使用
xun__xing的博客
03-09 9888
sate的变化和使用一、state的变化和使用1、reactive1.什么是reactive2.reactive注意点2、state的类型3.setup里面的vuex的使用方式4.封装获取state方式 最近公司项目需要使用vue3，发现vue3中的state变化较大，就干脆系统的学习下。把笔记做好站位，后面随时更新吧。 vue2中的state之前做过笔记，不懂得可以翻阅 深入剖析vuex. 一、state的变化和使用 本文部分借鉴自大佬的笔记. vue3中state获取状态的方法有多种，如下图所示，那么我
vue、vuex优化首页加载速度之引入cdn
weixin_43086811的博客
06-26 2799
第三方的插件，一时用着一时爽，一直用着，一直爽，但是打包之后，加载速度很慢，有时候首页加载需要四五秒，怎么办呢？除了路由按需加载之外，还有如下方法： 在index.html里面 如图，引入vue，vue-router，vuex，mint-ui，百度地图等cdn。 该安装的还是安装，防止第三方cdn挂掉，影响自己的项目运行。那么： main.js里面，其他方法里面 const Vue = re...
vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
weixin_41364246的博客
06-04 6130
一边学习vue3.x，一边实践，最近在做项目时，使用computed引入store中state的数据时，总是觉得很麻烦，想起新版兼容2.x,就想着引入mapState，可是怎么用都不对劲。后来，突然间醒悟过来，<font color=red>**使用toRef或toRefs，就能实现mapState、mapGetters效果。**</font> 1、示例代码 ...
vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法
最新发布
07-10
mapState: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的状态值。它接受一个数组或对象作为参数，用于指定我们想要映射的状态。当我们在组件中使用这个辅助函数时，它会返回一个计算属性对象，其中包含了我们所需的状态值。 例如，假设我们有一个名为`count`的状态值，我们可以使用`mapState`辅助函数将其映射到组件中： ```javascript import { mapState } from 'vuex'; export default { computed: { ...mapState(['count']) } } ``` 现在，在组件中我们就可以直接使用`count`这个计算属性来访问 Vuex store 中的`count`状态值。 mapGetters: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 getter 方法。它跟`mapState`的用法类似，接受一个数组或对象作为参数，用于指定我们想要映射的 getter 方法。同样，它也返回一个计算属性对象。 例如，假设我们有一个名为`doubleCount`的 getter 方法，我们可以使用`mapGetters`辅助函数将其映射到组件中： ```javascript import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['doubleCount']) } } ``` 现在，在组件中我们就可以直接使用`doubleCount`这个计算属性来访问 Vuex store 中的`doubleCount` getter 方法的返回值。 mapMutations: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 mutation 方法。它也接受一个数组或对象作为参数，用于指定我们想要映射的 mutation 方法。不同于`mapState`和`mapGetters`，`mapMutations`返回的是一个对象，其中包含了我们所需的 mutation 方法。 例如，假设我们有一个名为`increment`的 mutation 方法，我们可以使用`mapMutations`辅助函数将其映射到组件中： ```javascript import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['increment']) } } ``` 现在，在组件中我们就可以直接调用`increment`方法来触发 Vuex store 中的`increment` mutation。 mapActions: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 action 方法。它同样接受一个数组或对象作为参数，用于指定我们想要映射的 action 方法。类似于`mapMutations`，`mapActions`返回的也是一个对象，其中包含了我们所需的 action 方法。 例如，假设我们有一个名为`fetchData`的 action 方法，我们可以使用`mapActions`辅助函数将其映射到组件中： ```javascript import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['fetchData']) } } ``` 现在，在组件中我们就可以直接调用`fetchData`方法来触发 Vuex store 中的`fetchData` action。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值