【Vuex】Vue从仓库中获取state中数据的方法
在Vue中,我们离不开组件间的通信,有父子通信、兄弟通信、跨级通信等。由此,数据的存储是一个需要考虑的问题,什么方法能够使数据容易读取还不浪费内存呢?这需要根据具体问题具体分析。常见的方法有 props、$emit、$children、$root、vuex 等,今天我们重点分析一下使用vuex来存储数据并如何去获取数据。
·
在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>
更多推荐
已为社区贡献3条内容
所有评论(0)