32.VueJS学习-VueX/mapState

在 Vuex 中，mapState是一个辅助函数，用于将 Vuex 的 state 映射到组件的计算属性中。

一、基本用法

// 假设有下面的vue store

import Vuex from 'vuex'

const store = new Vuex.Store({
    state: {
        count: 0,
        message: 'Hello Vuex'
    },
    mutations: {},
    actions: {},
    getters: {}
})


// 在组件中，可以使用mapState如下

<template>
    <div>
        {{ count }}
        {{ message }}
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState(['count', 'meessage'])
    }
}
</script>

这里，mapState(['count', 'message'])将 Vuex store 中的count和message状态映射到组件的计算属性中，使得在组件中可以直接通过count和message来访问这些状态。

二、命名空间的使用

如果你的 Vuex store 使用了命名空间，可以这样使用mapState：

const moduleA = {
    namespaced: true,
    state: {
        moduleACount: 0
    },
    mutations: {},
    actions: {},
    getters: {}
}

const store = new Vuex.Store({
    modules: {
        moduleA
    }
})

在组件中：

<template>
    <div>
        <p>{{ moduleACount }}</p>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState('moduleA', ['moduleACount'])
    }
}

</script>

三、优势和作用

1.简化代码

• 避免在每个组件中重复书写获取 Vuex state 的代码，使组件的计算属性更加简洁。

2.提高可维护性

• 当 Vuex store 的状态结构发生变化时，只需要在一处修改映射关系，而不是在多个组件中分别修改。

总之，mapState是 Vuex 中一个非常有用的辅助函数，可以帮助你更方便地管理和访问 Vuex 的状态。