上一篇：

24 vue3 vuex actions的使用_十一月的萧邦-CSDN博客

本篇记录vue3中 vuex getters的使用方式 默认进行了模块化的管理，开启了命名空间

目录：

 user.js 写了两个示例，简单讲，就是一个不用传递参数，一个传递参数

const user = {
    namespaced: true,  //开启命名空间 建议开启
    state: {
        name: '小米',
        sex: 2,   //0=>代表女 | 1=>代表男 | 2=>代表保密
    },
    getters: {
        getUserInfoNoParams: state => {
            let {name, sex} = state
            return `我的名字是${name}，性别${sex === 0 ? '女' : sex === 1 ? '男' : '保密'}`
        },
        //第一个参数为state 第二个参数为getters，用于接收其他的getters
        // 若要传递参数，格式为 getter:(state,getters)=>(params)=>{return 返回值}
        getUserInfo: (state, getters) => ({age, hobby}) => {
            // console.log(getters)  //在这里面我们找到别的getters
            // console.log(age, hobby) //这是我们传递的参数
            let {name, sex} = state
            return `我的名字是${name}，性别${sex === 0 ? '女' : sex === 1 ? '男' : '保密'}，年龄${age}岁，爱好${hobby}` //返回值
        }
    }
}

export default user

index.js

import {createStore} from 'vuex'
 
import user from "./modules/user";
 
// 创建一个新的 store 实例
const store = createStore({
    strict: process.env.NODE_ENV !== 'production',  //在开发状态下开启严格模式
    modules: {
        user
    }
})
 
export default store

 任意页面：Test.vue

<template>
  <div>
    简单的个人信息介绍：{{ UserInfoNoParams }}
  </div>
  <div>
    完整的个人信息介绍：{{ userInfo }}
  </div>
</template>

<script>
import {computed} from 'vue'
import {useStore} from "vuex"

export default {
  name: "Test",
  setup() {
    let {getters} = useStore();
    let UserInfoNoParams = computed(() => getters['user/getUserInfoNoParams'])
    return {
      UserInfoNoParams,
      userInfo: computed(() => getters['user/getUserInfo']({age: 18, hobby: '听音乐'})),  //给getters传递参数
    }
  }
}
</script>

页面效果：

下一篇：

26 vue3 Pinia的安装配置_十一月的萧邦-CSDN博客