【Vuex】Vue从仓库中获取state中数据的方法

在Vue中，我们离不开组件间的通信，有父子通信、兄弟通信、跨级通信等。由此，数据的存储是一个需要考虑的问题，什么方法能够使数据容易读取还不浪费内存呢？这需要根据具体问题具体分析。

常见的方法有 props、$emit、$children、$root、vuex 等，今天我们重点分析一下使用vuex来存储数据并如何去获取数据。

Vuex是一个单一状态树，在全局拥有一个state存放数据，mutation进行同步操作，action进行异步操作，其中还有一个getter属性，相当于计算属性，用来返回state中定义的值。

一、存储数据

Vuex实现了模块化开发，我们建一个小仓库 tab.js 去存储一些数据并在 index.js 中进行引入：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        getCount(state) {
            return state.count
        }
    }
    modules: {
        tab
    }
})

// store/tab.js
export default {
    state: {
        isCollapse: false
    },
    // getters将state中定义的值暴露在this.$store.getters对象中
    getters: {
        getIsCollapse(state) {
            return state.isCollapse
        }
    },
    //mutations是修改state中的唯一手段，并且必须是同步函数
    mutations: {
        collapseClick(state) {
            state.isCollapse = !state.isCollapse
        }
    },
    actions: {}
}

二、获取数据

获取主仓库（index.js）的数据与获取分支小仓库（tab.js）的数据方法是有异同的：

同：

• getters方法

console.log(this.$store.getters.getCount)  // 0
console.log(this.$store.getters.getIsCollapse)  // false

使用getters方法可以直接获取到每个仓库中返回的值。

异：

• state方法

console.log(this.$store.state.count) // 0
conosle.log(this.$store.state.isCollapse)  // undefined
console.log(this.$store.state.tab.isCollapse) // false

直接获取分支小仓库中的数据是获取不到的，需要明确写出使用的是哪个小仓库中的数据。

三、辅助函数 mapState

从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，当一个组件需要获取多个状态的时候，那么如果将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，Vuex向我们提供了辅助函数 mapState，用来生成计算属性：

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

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState({
            count: state => state.count,
            isCollapse: state => state.tab.isCollapse,
            // 使用this时，必须使用常规函数
            getcount() {
                return this.$store.getters.getCount
            },
            getIsCollapse() {
                return this.$store.getters.getIsCollapse
            }
        })
    }
}
</script>