状态管理器Vuex的使用-CSDN博客

本文链接：https://blog.csdn.net/heiniuCSDN/article/details/136523702

本文详细介绍了VuexStore的四个主要部分：状态(State)、计算属性(Getters)、同步方法(Mutations)和异步操作(Actions)，以及在Vue2中的mapGetters使用和Vue3中Pinia的简化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex的Store有以下几个组成部分：

State（状态）：用于存储应用的状态，类似于组件的 data 属性。State 是响应式的，当 State 中的数据发生变化时，所有依赖于该状态的组件都会被重新渲染。
Getters（计算属性）：用于对 State 进行派生。Getters 可以对 State 中的数据进行处理，类似于组件中的计算属性。Getters 可以接收 State 作为第一个参数，并可以通过返回值来返回计算后的结果。
Mutations（同步方法）：用于修改 State 中的数据。Mutations 是唯一可以修改 State 的地方，类似于组件中的方法。Mutations 中的方法必须是同步的，且需要通过提交（commit）方法来调用。
Actions（异步方法）：用于处理异步操作，例如发送网络请求等。Actions 类似于 Mutations，不同之处在于 Actions 可以包含异步操作，并通过提交（commit）方法来调用 Mutations 中的方法。
Modules（模块）：用于将 Vuex Store 拆分为多个模块。每个模块都拥有自己的 State、Getters、Mutations 和 Actions。模块之间可以相互调用，以实现更好的代码组织和复用。

如果我们希望获取存储在store里定义的值，需要调用Getters方法，前提是你有定义好Getters方法。vue2中使用Getters方法代码如下：

import { mapGetters } from 'vuex'
 computed: {
        ...mapGetters(['msgList', 'funcList', 'funcTreeList','user','staffAcct'])

},

//  使用 this.msgList 即可获取msgList的值

对于action方法的使用 this.$store.dispatch('action方法存在的文件名/方法名'）

对于vue3使用的pinia则有更简便方法 pinia只保留了state Getters Actions 有点类似java中类的定义。pinia获取既可以使用响应式的方式获取，也可以调用getters方法获取。

import {userStore} from '@/stores/modules/userStore'
import {toRefs} from 'vue'

// 从缓存中获取用户信息
const state = userStore()
const {userName} = toRefs(state) // 是响应式 获取
const userInfo = userStore().getUserInfo; //获取用户信息