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模块化

相关推荐
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa