每天进步一点点——vuex的映射和派生状态mapState、mapActions和getters的使用

菜鸟又回来了。
最近一段时间没有学习，天天划水自己都不好意思。
工资也没涨，知识没长进，浪费了大笔时间。
至于时间都去哪了？
问就是？ 给股市的发展添砖加瓦了!
成了一名绿油油的韭菜。
韭菜命苦，割了一茬又一茬。
…

---

废话不多说，做一下今天学习的笔记。
今天看了一个盗版的vue讲解视频（等我涨工资了我再去买正版的学习）。
理解了之前看朋友发给我他们项目的源码。当时就对组件中mapState，mapActions好奇，自己百度了，也没搞懂，今天终于理解了。表意！

mapState

mapState :是vuex在组件中使用的一种映射。据我目前的理解，就是可以少些一段代码，就像我之前在组件中使用vuex的state,写的很菜鸟。代码如下:

data() {
	returen{
		affStaff: this.$store.state.organize.allStaff
	}
}

感觉就是一个菜鸡的写法。
然后我使用mapState,看上去稍微有点专业了

<sciript>

  import { mapState } from 'vuex';
  
  computed: {
	...mapState('organize',['allStaff'])	
  }
  //organize是vuex的子模块
</script>

用了之后是不是感觉有那么一点点高大山的感觉！
接下来是mapAction.

mapActions

有s
mapAction: 一看里面的action就知道是vuex里面action，异步操作。用法也是为了少写代码。

看我之前的代码

methods: {
  getMenus(val) {
    this.$store.dispatch('menumoudel/getmenus',val)
  }
  //通知vuex对获取路由==》 动态路由
}

菜鸟感十足！
现在这样的：

<script>

import { mapActions } from 'vuex'  //刚刚在VScode中引入才发现，mapActions **居然有s**

computed: {
  ...
}
//错了这次不是在computed里面，而是在methods里面使用
methods: {
  ...mapActions('menumoudel','getmenus'),
  getMenus(val) {
    this[getmenus](val)
  }
  //感觉就很专业，跟上面比较
}
</script>

学来即用,接下来是mapGetters

mapGetters

mapGetters: 是vuex的派生状态，我还没在业务中具体使用过。
刚刚测试使用了，作用是检测vuex中state里的值，用法如下：

//vuex menumoudel.js 
export default {
  state: {
    testName: ''
  }
  getters: {
    testGetter: state=> {
      return state.testName + ',我用了mapGetters'
  },
  mutations: {
   getmenus(state,data) {
     state.testName = data
   }
 }
}

然后在Test.vue中使用

<template>
  <div>{{testGetter}}</div>
</tempalte>
<script>
import {mapGetters}  from 'vuex';
export default {
  computed: {
    ...mapGetters('menumoudel', ['testGetter'])
 }
}
</script>

ok ,结束了，一天，加班了53分钟。