mapState和computed结合在Vue3版本中的setup使用

最新推荐文章于 2024-08-11 20:18:09 发布

海蓝树

最新推荐文章于 2024-08-11 20:18:09 发布

阅读量4.2k

点赞数 1

分类专栏： JavaScript 文章标签： vue

原文链接：https://blog.csdn.net/qq_41308489/article/details/121534153

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中更有效地使用Vuex状态管理，通过结合`mapState`和`computed`属性，避免重复代码，提高代码可读性和维护性。作者提供了一个神奇的用法，即创建一个自定义hook `useMapState`，允许开发者以数组或对象形式便捷地获取和使用Vuex状态。这个hook可以简化模板中的状态获取，使得在组件中引用Vuex状态更加简洁。

摘要由CSDN通过智能技术生成

引用地址：https://blog.csdn.net/qq_41308489/article/details/121534153

简单的用法: 直接用computed (不推荐）
import {computed} from "vue"
import {mapState, useStore} from "vuex"
export default {
setup() {
const store = useStore()
const counter = computed(() => store.state.counter)
return {
counter
}
}
}

如果直接用computed的话，后面如果还有很多状态的情况下，你就要写下面这样子的Bad code

const counter = computed(() => store.state.counter)
const name = computed(() => store.state.name)
const age= computed(() => store.state.age)
const counter = computed(() => store.state.counter)
const counter = computed(() => store.state.counter)

神奇的用法: 结合mapState和computed (推荐！拿来吧你！)
import {mapState, useStore} from "vuex"
import {computed} from "vue"
export default {
setup() {
const store = useStore()
const storeStateFns = mapState(['name', 'age', 'gender'])
/**
* mapState返回的数据结构:
* {
* name: function(){return 'xxx'},
* age: function(){return 'xxx'}
* }
*/
const storeState = {}
Object.keys(storeStateFns).forEach(fnKey => {
// mapState在解析state的数据时，是需要通过this.$store去解析
// 在setup里面是没有this的，所以我们给它的函数绑定ctx
// this => {$store: store}
const fn = storeStateFns[fnKey].bind({$store: store})
// 遍历生成这种数据结构 => {name: ref(), age: ref()}
storeState[fnKey] = computed(fn)
})

return {
...storeState
}
}
}

现在可以在template获取对应的状态数据

<template>
<h2>setup Name: {{name}}</h2>
<h2>setup Age: {{age}}</h2>
<h2>setup Gender: {{gender}}</h2>
</template>
1
2
3
4
5
为了方便使用封装为hook
useMapState.js

import { computed } from "vue"
import { mapState, useStore } from "vuex"
export default function (state) {
// 1. 获取实例 $store
const store = useStore()
// 2. 遍历状态数据
const storeStateFns = mapState(state)
// 3. 存放处理好的数据对象
const storeState = {}
// 4. 对每个函数进行computed
Object.keys(storeStateFns).forEach(fnKey => {
const fn = storeStateFns[fnKey].bind({ $store: store })
// 遍历生成这种数据结构 => {name: ref(), age: ref()}
storeState[fnKey] = computed(fn)
})
return storeState
}

使用方式（数组和对象都可食用）

传入数组形式
import useMapState from "./hooks/useMapState"
export default {
setup() {
const state = useMapState(['name', 'age', 'counter'])
return {
...state,
}
}
}
传入对象形式
import useMapState from "./hooks/useMapState"
export default {
setup() {

const myState = useMapState({
myName: state => state.name,
myAge: state => state.age
})
return {
...myState
}
}
}