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版本）

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