mapState, mapGetters, mapActions

时间: 2023-11-22 08:40:26 浏览: 79

vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters （上次记得关于vuex笔记 //www.jb51.net/article/138229.htm,是一个简单的应用；这是一些简单的vue的小组件方法： //www.jb51.net/article/138230.htm）何为四大金刚？　　1.State （这里可以是小写的 state，跟官网保持一致，采用大写，因为个人习惯，后面的代码介绍采用小写）　　vuex的状态管理，需要依赖它的状态树，官网说：　　Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一【Vuex 中的 State】 Vuex 的核心概念之一就是 State，它是整个应用的单一状态树。这意味着所有组件共享同一份状态，而不是各自维护自己的状态。这样做的好处是方便管理和跟踪应用的状态变化，使得调试和协作变得更为简单。在 Vuex 中，State 用于存储应用程序的所有层级状态。例如： ```javascript const state = { blogTitle: '迩伶贰blog', views: 10, blogNumber: 100, total: 0, todos: [ { id: 1, done: true, text: '我是码农' }, { id: 2, done: false, text: '我是码农202号' }, { id: 3, done: true, text: '我是码农202号' } ] } ``` 在这个例子中，`state` 包含了博客的标题、浏览量、博客数量、总数以及待办事项列表。【Mutation】 Mutation 是改变 Vuex State 的唯一途径。每个 Mutation 都包含一个类型（type）和一个处理函数（handler）。类型用于标识具体的修改动作，而处理函数则执行实际的状态改变。例如： ```javascript const mutation = { addViews (state) { state.views++ }, blogAdd (state) { state.blogNumber++ }, clickTotal (state) { state.total++ } } ``` 在这里，我们定义了三个 Mutation，分别用于增加浏览量、博客数量和总点击数。【Action】 Action 与 Mutation 类似，但它们可以包含异步操作，并通过提交 Mutation 来间接改变 State。这使得 Action 成为了处理复杂逻辑和远程操作的理想选择。比如： ```javascript const actions = { addViews ({ commit }) { commit('addViews') }, clickTotal ({ commit }) { commit('clickTotal') }, blogAdd ({ commit }) { commit('blogAdd') } } ``` 这里的每个 Action 都会调用对应的 Mutation 来更新 State。【Getter】 Getter 是从 State 中派生出来的辅助函数，用于创建计算属性，可以根据 State 的当前值返回新的衍生数据。这样可以在组件中直接使用 Getter 函数，而不是直接操作复杂的 State 数据。例如： ```javascript const getters = { getToDo (state) { return state.todos.filter(item => item.done === true) } } ``` 这个 Getter 用于获取所有已完成的待办事项。 **集成到应用中** 将以上内容整合到 Vuex 中，通常会在 `src` 目录下创建一个 `store` 文件夹，并在其中的 `index.js` 文件中定义 Store。例如： ```javascript import Vue from 'vue' import Vuex from 'vue' Vue.use(Vuex) export default new Vuex.Store({ state, mutations, actions, getters }) ``` 然后在你的 Vue 组件中，可以使用 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 辅助函数来简化访问和操作 State、Getters、Actions 和 Mutations。这些辅助函数可以让你在组件内便捷地绑定 Store 中的方法，如下所示： ```javascript import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' export default { computed: { ...mapState(['blogTitle', 'views']), ...mapGetters(['getToDo']) }, methods: { ...mapActions(['addViews', 'clickTotal', 'blogAdd']), ...mapMutations(['addViews', 'clickTotal', 'blogAdd']) } } ``` 这样，组件就可以直接调用 Store 中的方法，无需手动传递参数或关心 State 的管理细节，提高了代码的可读性和可维护性。

mapState、mapGetters和mapActions是Vue.js的Vuex库中的辅助函数，用于简化在组件中使用状态、计算属性和操作的过程。 mapState函数将Vuex中的状态映射到组件的计算属性中，使得可以通过this访问Vuex中的状态。这样可以方便地在组件中获取和使用Vuex中的数据。 mapGetters函数将Vuex中的计算属性映射到组件的计算属性中，使得可以通过this访问Vuex中的计算属性。这样可以方便地在组件中获取和使用Vuex中的计算属性的返回值。 mapActions函数将Vuex中的操作映射到组件的方法中，使得可以通过this调用Vuex中的操作。这样可以方便地在组件中触发Vuex中的操作，更新Vuex中的状态。通过使用这些辅助函数，可以简化组件中对Vuex的引用和使用，使得代码更加简洁和易于维护。

阅读全文

mapState, mapGetters, mapActions

相关推荐

详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

Map操作工具

vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用

import { mapState, mapGetters, mapActions } from "vuex";什么意思

vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法

解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题.doc

Vue 中的 mapState, mapGetters, mapActions 和 mapMutations 是做什么用的？

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex' import Background from '@/assets/images/background.png' import Helper from '@/utils/helper' import {getLogin} from '@/api/login' 什么意思？

(源码)基于Python和LSTM的台湾电力负荷预测系统.zip

基于SpringBoot的古城景区管理系统源码数据库文档.zip

基于Springboot + vue的健康膳食管理系统源代码+数据库

springboot287基于javaEE的校园二手书交易平台的设计与实现.zip

springboot302基于vue的汽车租赁系统.zip

毕业设计&课设_基于 vue.js 与 node.js 的毕业设计项目，含多模块功能，用于大学信息交流平台开发 .zip

基于卷积神经网络的连续语音识别_张晴晴.caj

碳排放权交易明细数据（2024年5月更新）.dta

基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip

最新推荐

vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

Vuex新手的理解与使用详解

VUE 3D轮播图封装实现方法

(源码)基于Python和LSTM的台湾电力负荷预测系统.zip

深入浅出：自定义 Grunt 任务的实践指南

管理建模和仿真的文件

数据可视化在缺失数据识别中的作用

ABB机器人在自动化生产线中是如何进行路径规划和任务执行的？请结合实际应用案例分析。

网络物理突变工具的多点路径规划实现与分析

"互动学习：行动中的多样性与论文攻读经历"