Vuex的简单实例(3)

vuex之mapState

1）有时候可以能会遇到一个组件里会用到多个state的状态，如果还是用声明计算属性的方式就会有些重复和冗余了，为了解决这个问题VUEX也提供了mapState辅助函数帮助我们生成计算属性，让你少写重复代码。首先，在需要的页面导入mapState

import { mapState } from 'vuex'

computed: mapState({
    isLogin: state => state.isLogin,
    username: state => state.username,
    password: state => state.password
  })

2）修改Home.vue，下面这种方式一样能够显示登录状态用户名与密码

// Home.vue
<template>
  <div class="home">
   登录状态：{{ isLogin }}
    <br />
    用户名：{{ username }} ，你好！
    <br />
    密码：{{ password }}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
	computed: mapState({
	    isLogin: state => state.isLogin,
	    username: state => state.username,
	    password: state => state.password
	  })
	  // computed: mapState(['isLogin', 'username', 'password', 'count']),
};
</script>

<style scoped>
</style>

这里的computed好像被mapState独用了，如果我们想写一个普通的（非mapState里面的）计算属性怎么办？这里就要用到对象展开运算符[…]

<script>
import { mapState } from 'vuex'

export default {
	data(){
		return {
			a: 10,
			b: 20
		}
	}
	computed: {
		sum(){
			return this.a + this.b	
		}
	    ...mapState: {
	    	isLogin: state => state.isLogin,
		    username: state => state.username,
		    password: state => state.password
	    }
	    // ...mapState(['isLogin', 'username', 'password', 'count']),
	  }
};
</script>

在Home.vue的template加上 总和：a + b = {{ sum }}

Vuex之Getter

1）在store.js中加一个list

// ...
    state: {
      isLogin: false, //登录状态
      username: '', //用户名
      password: '', //密码
      list: [
          { name: '钢铁侠', checked: true },
          { name: '美国队长', checked: false },
          { name: '黑寡妇', checked: true },
          { name: '雷神', checked: false },
          { name: '黑豹', checked: true },
          { name: '蜘蛛侠', checked: true },
      ]
    },
// ...

2）目的是显示checked为true的人员，给store对象添加getters属性

// ...
    getters: {
        showChecked: state => {
            return state.list.filter(item => item.checked)
        }
    },
// ...

3）在Home.vue的computed加一个属性

// ...
<div>
      已签到人员：<br>
      <ul>
        <li v-for="(item, index) in showChecked" :key="index">
          {{item.name}}
        </li>
      </ul>
    </div>
// ...
computed: {
    // 其他代码省略...
    showChecked () {
      return this.$store.getters.showChecked
    }
  }

3）接下来让它实现点击已签到、未签到显示对应名字，添加showChecked2

// 其他代码省略...
getters: {
        showChecked2: (state) => (checked) => {
            return state.list.filter(item => item.checked === checked)
        },
    },

4）在Home.vue的methods中，提前在created生命周期调用

// template
<div>
  <div>
    <a href="javascript:;" @click="getChecked(true)">已签到</a> |
    <a href="javascript:;" @click="getChecked(false)">未签到</a>
  </div>
  <ul>
    <li v-for="(item, index) in checkList" :key="index">{{item.name}}</li>
  </ul>
</div>

created(){
   this.getChecked(true)
 },
methods: {
	getChecked(checked) {
	      console.log(this.$store.getters.showChecked2(checked));
	      this.checkList = this.$store.getters.showChecked2(checked);
	    }
}

Vuex之mapGetters

1）mapGetters也是Vuex的一个辅助函数，在store中加list数据测试，上面的代码可以简化成下面这样

// store.js
state : {
	songs: [
	    { name: '黑色毛衣', singer: '周杰伦' },
	    { name: '烟花易冷', singer: '周杰伦' },
	    { name: '爱笑的眼睛', singer: '林俊杰' },
	    { name: '美人鱼', singer: '林俊杰' },
	    { name: '不能说的秘密', singer: '周杰伦' },
	    { name: '一千年以后', singer: '林俊杰' },
	    { name: '七里香', singer: '周杰伦' },
	    { name: '修炼爱情', singer: '林俊杰' },
	]
},
getters: {
    showChecked: state => {
        return state.list.filter(item => item.checked)
    },
    showChecked2: (state) => (checked) => {
        return state.list.filter(item => item.checked === checked)
    },
    showSongs: state => {
        return state.songs.filter(item => item.singer == '周杰伦')
    }, // 返回周杰伦的歌
},

// Home.vue 省略其他代码...
// template
<div>
  <div>周杰伦的歌</div>
  <ul>
    <li v-for="(item, index) in showSongs" :key="index">{{item.name}} - {{item.singer}}</li>
  </ul>
</div>

methods: {
   getChecked(checked) {
     console.log(this.showChecked2(checked));
     this.checkList = this.showChecked2(checked);
   }
}
computed: {
    sum() {
      return this.a + this.b;
    },
    showChecked() {
      return this.showChecked;
    },
    // ...
    ...mapGetters(["showChecked", "showChecked2", "showSongs"])
    // 就直接通过this.showChecked调用
  }