vuex中关于mapState，mapGetters,mapMutations,mapActions的作用

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的，然后突然出来一种加了一个前缀的mapState等，这样的就有点蒙圈了。。。特别是官方的文档并没有给除详细的说明跟例子。。。然后就自己慢慢理解了一下。其实也就是一个重命名而已。。。以下就是例子，希望能帮助理解：

在store中代码

​[html]​ 

view plain

 copy

1. import Vuex from 'vuex'
2. import Vue from 'vue'
3. Vue.use(Vuex);
4. const store = new Vuex.Store({
5. state: {
6. count: 10,
7. numb: 10086
8. },
9. getters: {
10. add: (state, getter) => {
11. state.count = getter.add;
12. return state.count;
13. },
14. },
15. mutations: {
16. increment(state,){
17. state.count += 2;
18. },
19. },
20. actions: {
21. actionA({ dispatch, commit }) {
22. return commit('add');
23. },
24. }
25. });
26. export default store;

在调用的模块里面的代码如下：

​[html]​ 

view plain

 copy

1. <template>
2. <div class="hello">
3. <button @click="increment">加{{count}}</button>
4. </div>
5. </template>
6. <script>
7. import {mapState,mapActions} from 'vuex'
8. export default {
9. name: 'hello',
10. data () {
11. return {
12. msg: 'Welcome to Your Vue.js App'
13. }
14. },
15. methods:{
16. increment(){
17. this.$store.dispatch('incrementsync').then(() => {
18. console.log('then');
19. });
20. }
21. },
22. computed: mapState({ // mapState相当于映射
23. count: 'numb',  //这个时候count应该等于多少？！！ 是等于store文件里面的count呢还是等于numb？答案是等于numb！这边的意思是mapState把'numb'的值映射给了count，所以count等于10086
24. })
25. }
26. </script>

这个时候按钮应该显示加10还是显示加10086？答案是加10086，所以map其实就是一个在store文件中的映射而已，就是不用让你要调用一个值需要敲这么多代码：this.$state.count;而只需要用count。。。

界面效果：

好了，其他的mapAction，mapMutations的原理是一样样的