在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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐