javascript vuex状态和吸气剂

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>Up</button>
                <button>Down</button>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{}
    },
    computed:{
        // info(){return this.$store.state.product_list}
        ...mapState([
            'product_list'
        ])
    },
    methods:{}
}
</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:{},
    actions:{}
}

export default new vuex.Store(store)