【无标题】

vuex入门

1 什么是vuex

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

1.1 state

state提供唯一的数据资源，所有的共享的数据统一放到state中进行存储

• 组件中访问state第一种方式:

this.$store.state.全局数据名称

• 组件中访问state第二种方式:

import {mapState} from 'vuex'; //导入mapState
...mapState(['importValue','viewKey']), //将全局数据，映射为当前组件的计算属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48uHiibN-1668066328997)(C:\Users\huai66\AppData\Roaming\Typora\typora-user-images\image-20221110152541678.png)]

1.2 mutation

mutation用于变更store中的数据

• mutation用于变更store中的数据，不可以直接操作store中的数据
• 通过mutation这种操作方式可以集中监控所有数据的变化，便于后期维护

1. 触发mutations的第一种方式

this.$store.commit()

2. 触发mutations的第二种方式

import {mapMutations} from 'vuex' //导入mapMutations
methods:{ ...mapMutations(['add']) }  

1.3 action

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

1. 触发action的第一种方式

this.$store.dispatch('')

2. 触发action的第二种方式

import {maptActions} from 'vuex'//导入maptActions
methods:{ ...maptActions(['addAsync']) }

1.4getter

Getter于对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据起到的是包装数据的作用

• Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性
• Store 中数据发生变化，Getter 的数据也会跟着变化

1. 触发getters第一种方式

this.$store.getters.

2. 触发getters第二种方式

import {maptGetters} from 'vuex' //从vuex中按需求导入mapState函数
computed :{ ...maptGetters(['showNum']) }