VUEX 辅助函数 mapState、mapGetters、mapMutations、mapActions

本文链接：https://blog.csdn.net/fyinthesky/article/details/87976645

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<script src="https://unpkg.com/vuex@2.3.0" ></script>

</head>
<body>
<h1>vuex</h1>

   <h2> vuex example</h2>
<hr>


   <div id="example-2">
   <div>
   辅助函数 mapState、mapGetters、mapMutations、mapActions
   可以在组件中做对象映射
   </div>
   <counter></counter>

   </div>


<script type="text/javascript">

   var myStore = new Vuex.Store({
           state:{

               voteitems:[{text:'A',value:0},{text:'B',value:0},{text:'C',value:0},{text:'D',value:0}],
               count:0,
               count2:1,
               count3:2,
               str01:"str01",
               name:'moduleA',

           },
           mutations:{

               deIncrement:function(state,a){
               state.count3--
               },
               increment:function(state,a){
                   state.count3++
               },

               changeadjust:function(state,option){

               },


           },
           getters:{

               str01: state => {
                   return state.str01
               },
               str02: state => {
                   return state.str01
               }
           },
           actions:{

           addAction:function(state,a){

           //可以直接修改
           //this.myStore.state.count3++

           // async / await 同步和异步
           //或者提交给mutations
               this.myStore.commit('increment', 10)
           }
           }
       })

   Vue.component('counter', {
       template: `<div>{{ count }} {{countPlusLocalState}} {{anotherState}} {{str01}} {{str02}}
       <button @click="addHandle">add</button>
       <button @click="deHandle">de</button>
       </div>`,
       data: function(){
       return {localCount:20}
       },

       // computed 1
       /*
       computed: {
           count () {
           return this.$store.state.count
           }
       }
       */

       // computed 2

       //computed: mapState 改为 computed: Vuex.mapState ，这样就不会报错了
       // computed: Vuex.mapState({
       //   count:'count2'
       //})

       // computed 3
       /*
       computed:Vuex.mapState({
// count:state=>state.count2, //理解为传入state对象，修改state.count属性
       // count: state => state.count2,
           count: 'count3',
           countPlusLocalState (state) {
               return state.count + this.localCount
           }
})
       */

       computed 4
       computed:{
       // … 三个点，在框架语言里，就是传对象
               ...Vuex.mapState({
           // count:state=>state.count2, //理解为传入state对象，修改state.count属性
           // count: state => state.count2,
               count: 'count3',
               countPlusLocalState (state) {
                   return state.count + this.localCount
               }
               }),

               // 使用对象展开运算符将 getter 混入 computed 对象中,同时也可以起别名,别名暂时没调通
               ...Vuex.mapGetters([

                       'str01',
                   'str02',
                   //    str03:'str01',


               ]),

               // 可以使用外部方法
       ...Vuex.mapState({

               anotherState (state) {
                   return outsidefunction()
               }
               })
       },

methods: {

               // 分发给store中的方法或者action
               ...Vuex.mapActions({
               addHandle: 'addAction'
               }),
               // 辅助函数不能直接传值，可以在方法体内传值
               ...Vuex.mapMutations({
               deHandle: 'deIncrement'
               })

       }


       })

   function outsidefunction(){
   return 100;
   }
   function localincr(){
   this.myStore.state.count3++
   }

   new Vue({
       el: '#example-2',
       data: {

       },
       store:myStore,
       computed:{
       }
       })

</script>

</body>
</html>