javascript vue vuex mapActions和mapMutations

Posted 2021-05-03

<template>
  <div id="app">
    <product_list></product_list>
    <sale_product_list></sale_product_list>
  </div>
</template>
<script>
import product_list from '@/components/product_list.vue'
import sale_product_list from '@/components/sale_product_list.vue'
export default {
  name: 'app',
  components: {
    'product_list':product_list,
    'sale_product_list':sale_product_list
  },
  data() {
    return {

    }
  },
  computed: {

  }
}

</script>

<template>
    <div id="product_list">
        <p>Original Price List</p>
        <ul>
            <li v-for='item in product_list' :key='item.index'>
                <b>{{item.product}}</b> @  $<i>{{item.price}}</i>/KG
                <button @click='edit_each_price(true,item)'>Up</button>
                <button @click='edit_each_price(false,item)'>Down</button>
            </li>
        </ul>
        <button @click='edit_all_price(true)'>All Up</button>
        <button @click='edit_all_price(false)'>All Down</button>
    </div>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
export default {
    data(){
        return{
            margin:0.5
        }
    },
    computed:{
        // info(){return this.$store.state.product_list}
        ...mapState([
            'product_list'
        ])
    },
    methods:{
        ...mapMutations([
            'mutate_all_price'
        ]),
        ...mapActions([
            'action_each_price'
        ]),
        edit_each_price(direction, item){
            this.action_each_price([direction,this.margin,item])
            // this.$store.dispatch('action_each_price', [direction, this.margin,item])
        },
        edit_all_price(direction){
            this.mutate_all_price([direction, this.margin])
        // this.$store.commit('mutate_all_price',[direction,this.margin])
    }
}
}
</script>

<style scoped>
    *{margin:0;padding:0;}

</style>

<template>
    <div id="sale_product_list">
        <p>Sale Product List</p>
        <ul>
            <li v-for='item in sale_product_list' :key='item.index'>
                <b>{{item.product}}</b> @ $<i>{{item.price}}</i>/kg
            </li>
        </ul>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    data(){return{}},
    computed:{
    //   sale_product_list(){  return  this.$store.getters.sale_product_list}
    ...mapGetters([
            'sale_product_list'
        ])
    },
    methods:{}
}
</script>

import vue from 'vue'
import vuex from 'vuex'

vue.use(vuex)

const store = {
    state:{
        product_list: [
        {
          product:'apple', price:5
        },
        {
          product:'peach', price:4
        },
        {
          product:'grape', price:6
        },
        {
          product:'orange', price:3
        }
      ]
    },
    getters:{
        sale_product_list:function(state){
            return state.product_list.map(function(item){
              return{
                product:item.product,
                price:item.price/2
              }
            })
          }
    },
    mutations:{
        mutate_each_price(state,argument){

            if(argument[0]){
                argument[2].price += argument[1]
            }else{
                argument[2].price -= argument[1]
            }
        },
        mutate_all_price(state, argument){
            // argument 0 is the direction and argument 1 is the margin
           if(argument[0]) {
            state.product_list.forEach(function(item){
                item.price += argument[1]
            })
           }else {
            state.product_list.forEach(function(item){
                item.price -= argument[1]
           },3000)
        }

        }
    },
    actions:{
        // talk to backend program via ajax vue resource
        // update state when database has been updated successfully
        action_each_price(context,argument){
            setTimeout(function(){
                context.commit('mutate_each_price',argument)
            })
        }
        // action_all_price(context,argument) {
        //     context.commit('mutate_all_price',argument)
        // }
    }
}

export default new vuex.Store(store)