vue2学习 -- vuex

文章目录

    • [1. 理解](#1. 理解)
    • [2. 语法](#2. 语法)
      • [2.1 安装使用](#2.1 安装使用)
      • [2.2 getters配置项](#2.2 getters配置项)
      • [2.3 四个map方法的使用](#2.3 四个map方法的使用)
      • [2.4 vuex模块化](#2.4 vuex模块化)

1. 理解

  1. 概念:专门在ue中实现集中式状态(数据)管理的一个ue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适
    用于任意组件间通信。
  2. Github地址https://github.com/vuejs/vuex
    ❓什么时候使用Vuex
    • 多个组件依赖于同一状态
    • 来自不同组件的行为需要变更同一状态

2. 语法

2.1 安装使用

搭建vuex环境

  1. 安装插件

npm i vuex@3(默认为4版本,只能用于vue3,3版本为vue2版本)

  1. use插件

Vue.use(vuex)


如果出现以下报错,检查一下是不是写成了new Vue.Store({...}),应该是new Vuex.Store({...})

  • 组件中读取vuex中的据:store.state.sum
  • 组件中修改Vuex中的数据:Store.dispatch('actiont中的方法名',数据)Store.commit('mutations中的方法名',数据)
    备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

2.2 getters配置项

store中的getters与组件中的computed类似,可以进行复杂的数据运算。

写法与computed也一样。

2.3 四个map方法的使用

  1. mapState方法 :用于帮助我们映射state中的数据为计算属性

    computed:{
    // 借助mapState生成计算属性:sum、school、subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
    },

  2. mapGetters方法 :用于帮助我们映射getters中的数据为计算属性

    computed:{
    // 借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),
    // 借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
    },

  3. mapActions方法 :用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

    methods:{
    // 靠mapActions:生成:increment0dd、incrementWait(对象形式)
    ...mapActions({incrementodd:'jiaOdd',incrementWait:'jiaWait'})
    // 靠mapActions生成:increment(0dd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait']
    }

  4. mapMutations方法 :用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

    methods:{
    // 靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN')),
    // 靠mapMutations.生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
    }

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象

2.4 vuex模块化

转载笔记📒:vuex模块化

相关推荐
遇见尚硅谷3 小时前
C语言:*p++与p++有何区别
c语言·开发语言·笔记·学习·算法
艾莉丝努力练剑3 小时前
【数据结构与算法】数据结构初阶:详解排序(二)——交换排序中的快速排序
c语言·开发语言·数据结构·学习·算法·链表·排序算法
jz_ddk4 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
试着4 小时前
零基础学习性能测试第五章:Tomcat的性能分析与调优-Tomcat原理,核心配置项,性能瓶颈分析,调优
学习·零基础·tomcat·性能测试
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
@蓝莓果粒茶6 小时前
LeetCode第350题_两个数组的交集II
c++·python·学习·算法·leetcode·职场和发展·c#
无名工程师6 小时前
AI 学习过程中各阶段的学习重点、时间规划以及不同方向的选择与建议等内容
人工智能·学习
试着6 小时前
零基础学习性能测试第五章:JVM性能分析与调优-垃圾回收器的分类与回收
jvm·学习·零基础·性能测试·垃圾回收器
livemetee6 小时前
Flink2.0学习笔记:Stream API 常用转换算子
大数据·学习·flink
WXX_s6 小时前
【OpenCV篇】OpenCV——03day.图像预处理(2)
人工智能·python·opencv·学习·计算机视觉