Blog

Vuex 状态管理详解

Vuex 的核心概念、使用场景以及 State、Getter、Mutation、Action、Module 的详细说明

你使用过 Vuex 吗?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。 (1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 (2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。 主要包括以下几个模块: State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。 Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。 Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。 Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。 Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

vuex是什么?怎么使用?哪种功能场景使用它?

  • 是什么:vue框架中状态管理:有五种,分别是 State、 Getter、Mutation 、Action、 Module
  • 使用:新建一个目录store,
  • 场景:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

vuex的State特性

  • A、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于一般Vue对象里面的data
  • B、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
  • C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性

  • A、getters 可以对State进行计算操作,它就是Store的计算属性
  • B、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
  • C、 如果一个状态只在一个组件内使用,是可以不用getters

vuex的Mutation特性

改变store中state状态的唯一方法就是提交mutation,就很类似事件。 每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。 我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

Action

Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态; Action 可以包含任意异步操作,Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象, 因此你可以调用 context.commit 提交一个 mutation, 或者通过 context.state 和 context.getters 来获取 state 和 getters。 Action 通过 store.dispatch 方法触发:eg。 store.dispatch(‘increment’)

vuex的module特性

Module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块, 每个模块中拥有自己的state、mutation、action和getter