619 字
2 分钟
Vuex 学习笔记
Vuex 学习笔记
本文以适用于 Vue3 的 Vuex4 为例。
一、Vuex 是什么
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
好处：
- 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
- 能够高效地实现组件之间的数据共享，提高开发效率存储
- 在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步 注：一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。
二、Vuex 核心概念
1、state
state 提供唯一的公共数据源，所有共享的数据都要统一放到 store 的 state 中进行存储。
import { createStore } from 'vuex'
export default createStore({ state: () => ({ count: 0; })}) 组件中访问 state 中数据的方式：
this.$store.state.全局数据名 按以下方式，可以绑定到计算属性上：
computed(){ count(){ return this.$store.state.count; }} 但过于冗余，可以用 mapState 简化操作：
import { mapState } from 'vuex'
computed: { ...mapState(['count'])}2、mutations
mutation用于变更 store 中的数据。
只能通过 mutation 变更 store 数据，不可以直接操作 store 中的数据。通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。store.js 中：
import { createStore } from 'vuex'
export default createStore({ state: () => ({ count: 0; }), mutations: { // 传递参数 add(state, step) { state.count += step; } }})组件中触发：
methods: { handle1() { this.$store.commit('add', 2); }}也可以使用 mapMutations 触发 mutations，映射为方法：（更简洁）
import { mapMutations } from 'vuex'
methods: { ...mapMutations(['add', 'addN'])}注：不要在 mutations 中执行异步操作，会导致调试器数据不同步！
3、actions
actions 用于处理异步任务。
如果通过异步操作变更数据，必须通过 actions，而不能使用 mutations，但是在 actions 中还是要通过触发 mutations 的方式间接变更数据。
const store = createStore({ mutations: { add(state) { state.count++; } }, actions: { addNAsnyc(context, step) { // 携带参数 setTimeout(() => { context.commit('addN', step); }, 1000) } }}) 触发：
methods: { handle() { this.$state.dispatch('addAsync', 5); }}同样地，我们也可以用 mapActions 映射其到方法：
import { mapActions } from 'vuex'
methods: { ...mapActions(['addAsync', 'addNAsync']);}4、getters
getters 用于对 store 中的数据进行加工处理形成新的数据。
getters 可以对 store 中已有的数据加工处理之后形成新的数据，类似计算属性。store 中数据发生变化，getters 的数据也会跟着变化。
const store = createStore({ state: () => ({ count: 0; }), getters: { showNum: state => { return `当前最新数量值：${state.count}`; } }})使用：
this.$store.getters.showNum映射至计算属性：
import { mapGetters } from 'vuex'
computed: { ...mapGetters(['showNum'])}5、modules
业务逻辑不复杂时用不到。参见：https://vuex.vuejs.org/zh/guide/modules.html
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时
相关文章 智能推荐