Vue2-Vuex中State、Mutation及mapState辅助函数、mapMutations的基本用法

已于 2024-01-15 10:44:46 修改
阅读量624 收藏 10
点赞数 21
分类专栏： vue 文章标签： vue.js
于 2024-01-15 10:05:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LxyingINGing/article/details/135593465
版权

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

个人笔记，仅供参考。

state：全局共享的响应式数据

mutation:声明修改全局响应式数据方法的地方

优化调用：

导入：

计算属性：

或

模板中简化写法：count修改为vuex_count

js中简化写法：

mapMutations用法：

传参：

LxyingINGing
关注
  • 21
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-vuex-starter-kit:开始使用Axios，Vue2，Vuex2和Vue-router2。 使用webpack构建应用
05-02
vue-vuex入门套件开始使用Vue，Vuex和Vue-router。 使用webpack构建应用。快速开始确保您的节点版本> = 6.0，NPM> = 3 # Clone project code git clone ...
vue-router-vuex-示例：vue + vue-router + vuex
01-31
vue-router-vuex-示例 Vue + Vue路由器+ Vuex + Webpack入门项目创建该存储库是为了演示一个简单的应用程序，该应用程序使用vue和vue-router-sync通过状态管理模式在整个应用程序中传递数据。要求要运行此程序，需要...
Vue——14-vuex安装 State、Mutations以及Getters状态的的使用
NanChen的博客
11-11 1359
Vuex的安装以及状态的多种使用方法，一看就会，一做就没
vue使用--vuex快速学习与使用
weixin_30443075的博客
08-27 159
　　什么是vuex？ 　　Vuex核心概念 　　Vuex安装与使用 　　　　1.安装 　　　　2.目录结构与vuex引入 　　　　3.store中变量的定义、管理、派生（getter） 　　　　4.vuex辅助函数的使用说明 　　Vuex刷新数据丢失问题处理 什么是vuex？ Vuex 是专门为 Vue.js 设计的状态管理库...
Vue02 state与mapState，附架构师必备技术详解
最新发布
2401_83739951的博客
03-21 603
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
Vue2.x - Vuex
伏城之外的博客
06-11 1834
Vuex学习总结
vue-cli中vueX的安装与使用
WebDestiny的博客
09-11 4226
前言： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，但并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发实际需要进行权衡和确定。 运用vueX的场景： 多个视图依赖于同一状态，此时传参的方法对于多层嵌套的组件将...
vuex的使用之mapMutations
weixin_44794123的博客
07-05 9091
vuex中mapMutations的使用。
Vuex的使用（七）——mapMutations的用法
讨厌走开啦
09-08 7403
参考文档：https://vuex.vuejs.org/zh/guide/ mapMutations的定义可以对标mapState和mapGetters，就不赘述了，下面直接上示例代码。首先在Vuex中补充mutations的其他几种用法（修改文件路径为src\store\index.js），代码如下： import Vue from “vue”; import Vuex from “vuex”; Vue.use(Vuex); const store = new Vuex.Store({ state: {
Vue2：Vuex中使用mapMutations和mapActions
Brave_heart4pzj的博客
02-18 438
Vue
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
m0_64494670的博客
11-13 1756
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
vuex模块整体回顾
weixin_43909743的博客
12-22 334
vuex基础-介绍 为什么会有Vuex ? ​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用**集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测**的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXWj1lLi-1605020012440)(assets/image-20200902235150562.png)] 结论
vue-vuex中使用commit提交mutation来修改state的方法详解
10-18
今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
u010227042的博客
06-17 1647
vuex进阶 一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
Vue知识点整理（五）- vuex（2）- getters配置项、mapState与 mapGetters、mapActions与mapMutations、多组件共享数据
JHY97的博客
04-24 3061
一、getters配置项 1. 概念：当state中的数据需要经过加工后在使用时，可以使用getters加工 2. 在store.js中追加getters配置： ... // 准备getters - 用于将state中的数据进行加工 const getters = { 自定义命名(state){ return ...... } } // 创建并暴露store export default new Vuex.Store({ ... getters })
vuex中如何使用mapState函数(vue2/vue3使用方法)
stay hungry, stay foolish
06-10 7593
通过...运算符进行结构，将store中的state进行映射。在template中可以直接使用，不需要通过`this.$store.state`一个个获取store中的state数据。 在vuex中可以导出改函数。
vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions
冰冰酱
03-24 2918
vuex的使用
Vue2知识点(下)
weixin_69966934的博客
10-07 1330
Vue2知识点下半部分
vue3中使用vuex辅助函数
07-25
在Vue 3中，你可以使用Vuex辅助函数来简化在组件中使用Vuex的操作。下面是使用Vuex辅助函数的步骤： 首先，确保已经安装了Vuex和Vue 3。 在你的Vue 3项目中，创建一个store文件夹，并在其中创建一个store.js文件。在store.js文件中，你可以定义你的Vuex store，包括状态(state)、mutations、actions等。 ```javascript // store.js import { createStore } from 'vuex'; const store = createStore({ state: { // 状态 }, mutations: { // 修改状态的方法 }, actions: { // 异步操作的方法 }, }); export default store; ``` 在你的根组件(App.vue)中，使用`createApp`函数创建Vue实例时，将store传递给`use`方法，这样整个应用程序都可以访问到store。 ```javascript // App.vue import { createApp } from 'vue'; import store from './store'; createApp(App).use(store).mount('#app'); ``` 现在，你可以在任何组件中使用Vuex辅助函数来访问store中的状态和触发mutations或actions。 在组件中，你可以使用`mapState`辅助函数来将store中的状态映射到组件的计算属性中。 ```javascript // MyComponent.vue import { mapState } from 'vuex'; export default { computed: { ...mapState(['stateProperty']), }, }; ``` 你也可以使用`mapMutations`辅助函数来将mutations映射到组件的methods中，以便在组件中触发mutations。 ```javascript // MyComponent.vue import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['mutationName']), }, }; ``` 最后，你可以使用`mapActions`辅助函数将actions映射到组件的methods中，以便在组件中触发actions。 ```javascript // MyComponent.vue import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['actionName']), }, }; ``` 这样，你就可以在Vue 3中使用Vuex辅助函数来简化在组件中使用Vuex了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值