目录
computed 接收 Vuex state 返回数据有 4 种方式
State 单一状态树
- Vuex 使用单一状态树时,用一个对象包含全部应用层级状态
- Vuex 作为一个“唯一数据源”存在,意味着每个应用将仅仅包含在一个 store 实例中
Vue 组件中获取 Vuex 状态
- Vuex 状态存储是响应式的,从 store 实例中读取状态最简单方法是在计算属性中返回某个状态
- 也可以通过 this.$store.state 访问状态中的值
- Vuex 通过 store 选项提供一种机制,将状态从根组件注入到每一个子组件中,调用 Vue.use(Vuex) 方法
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
state,
})
// state.js
export default {
name: '张三',
age: 30,
sex: '男',
from: '中国'
}
<template>
<section>
{{age}}
</section>
</template>
<script>
export default{
name: 'Home',
computed: {
age(){
// 每当 age 变化时,都会重新求取计算属性,触发更新相关联 DOM
return this.$store.state.age
}
}
}
</script>
mapState 辅助函数
- 当一个组件需要获取多个状态时,将这些状态都声明为计算属性有些重复和冗余
- 为了解决这个问题,使用 mapState 辅助函数帮助我们生成计算属性
<template>
<section>
{{age}}
</section>
</template>
<script>
import { mapState } from 'vuex'
export default {
data(){
return{
national: '国籍'
}
},
computed: mapState({
age: state => state.age, // 箭头函数可使代码更简练
ageAlias: 'age', // 字符串参数 'age' 等同于 `state => state.age`
userInfo (state) {
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
return state.name + this.national + state.from
}
})
}
</script>
- 映射计算属性名称与 state 子节点名称相同时,可以给 mapState 传一个字符串数组
computed: mapState(['count']) // 映射 this.count 为 this.$store.state.count
mapState 对象展开运算符
- 返回一个对象
- 使用工具函数将多个对象合并为一个对象,最终把对象传给 computed 属性
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
computed 接收 Vuex state 返回数据有 4 种方式
- 方法一:mapState 对象展开运算符
computed: {
...mapState({
count: state => state.count
})
}
- 方法二:mapState 辅助函数参数是一个对象
computed: mapState({
count: state => state.count
})
- 方法三:mapState 辅助函数参数是一个字符串数组
computed: mapSate(['count'])
- 方法四:定义一个计算属性方法返回某个状态
computed: {
count(){
return this.$store.state.count
}
}