Vuex的初探与实战小结

computed:{
 count(){
   return this.$store.state.count;
 }，
  stateA(){
   return this.$store.state.stateA;
  }，
  stateB(){
   return this.$store.state.stateB;
  }
}

这样获取共享状态的数据也没有什么问题不过看起来还是有大量的重复冗余代码，我们可以使用

mapState

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给

mapState

import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
  }
 }

小结：使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。

4.2.getter

有的时候我们需要对共享状态里面的某一个属性做一些处理后再使用，我们可以把数据获取后再在组件的计算属性中处理，举个例子如下：

// store/index.js
state: {
  count:0,
  numbers:[0,1,2,3,4,5,6,7,8] },
// Index组件
<template>
 <div class="index">
  {{count}}
  <br>
  {{numbers.join()}}
 </div>
</template>
<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   numbers(){
    return this.$store.state.numbers.filter((item)=>{
     return item>3;
    })
   }
  }
 }
</script>

结果如下：

那么问题来了，如果多个组件都要做同样的处理，我们就需要把一份代码复制到多个地方，显然是不大合理的，于是有了getter，可以理解为组件里面的计算属性。示例如下：

/ store/index.js
getters: {
  filterNumbers(state){
   return state.numbers.filter((item)=>{
    return item>3;
   })
  }
 },
// Index组件
<template>
 <div class="index">
  {{count}}
  <br>
  {{filterNumbers.join()}}
 </div>
</template>
<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   filterNumbers(){
    return this.$store.getters.filterNumbers;								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页