[JavaScript知识库]Vuex state、mapState、...mapState (二)

computed 接收 state 返回的数据有哪 4 种方式?？

State 单一状态树

Vuex 使用单一状态树，用一个对象包含全部应用层级状态。Vuex 作为一个“唯一数据源”存在。意味着每个应用将仅仅包含在一个 store 实例中。
?

在 Vue 组件中获取 Vuex 状态

Vuex 状态存储是响应式的，从 store 实例中读取状态最简单方法是在计算属性中返回某个状态。Vuex 通过 store 选项，提供了一种机制，将状态从根组件“注入”到每一个子组件中，调用 Vue.use(Vuex) 方法。子组件通过 this.$store.state 访问状态中的值。

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'

Vue.use(Vuex)

export default new Vuex.Store {
  state,
}

// state.js
export default {
  name: '张三',
  count: 30,  
  sex: '男',
  from: '中国'
}

<template>
  <section>
    {{count}}
  </section>
</template>

<script>
export default{
  name: 'Home',
  computed: {
    count(){
      // 每当 this.$store.state.count 变化时，都会重新求取计算属性，触发更新相关联 DOM
      return this.$store.state.count
    }
  }  
}
</script>

mapState 辅助函数

当一个组件需要获取多个状态时，将这些状态都声明为计算属性有些重复和冗余。为了解决这个问题，使用 mapState 辅助函数帮助我们生成计算属性：

<template>
  <section>
    {{count}}
  </section>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  data(){
    return{
      national: '国籍'
    }
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.name + this.national + state.from
    }
  })
}
</script>

映射计算属性名称与 state 子节点名称相同时，可以给 mapState 传一个字符串数组。

computed: mapState(['count']) // 映射 this.count 为 store.state.count

对象展开运算符

mapState 函数返回一个对象。使用工具函数将多个对象合并为一个对象，最终把对象传给 computed 属性。

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

?

computed 接收 Vuex?state 返回数据有 4 种方式：

// 方式一
computed: {
  count(){
    return this.$store.state.count
  }
}
// 方式二
computed: mapState({{
  count: state => state.count
})
// 方式三
computed: mapSate(['count'])
// 方式四
computed: {
  ...mapState({
    count: state => state.count
  })
}