vuex小案例 组件共用数据

效果：

 

store中的内容：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state:{
    products:[
      {name:"马云",price:200},
      {name:"马化腾",price:140},
      {name:"马冬梅",price:20},
      {name:"马蓉",price:10}
    ]
  },
  //将state中的数据做一些集中处理，用map遍历数组中每一个数据做处理
  //将state作为参数传入，可以直接使用遍历等
  getters:{
    saleProducts: (state) =>{
      var saleProducts = state.products.map(product =>{
        return {
          name: "**" + product.name + "**",
          price:product.price
        };
      });
      return saleProducts;
    }
  },
//payload作为参数被传入使用的组件，items.price -= payload
//payload传几就减几
  mutations:{
    reducePrice: (state,payload) =>{
      // setTimeout(function(){
      state.products.forEach(product =>{
        product.price -= payload;
      })
      // },3000);
    }
  },

  //使用commit去激活mutations里的方法
  //context是参数有调用mutations的作用
  actions:{
    reducePrice:(context,payload) =>{
      setTimeout(function(){
        context.commit("reducePrice",payload);
      },0);
    }
  }
})

 

A组件：

<template>
  <div id="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="product in products">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
    <button @click="reducePrice(4)">商品降价</button>
  </div>
</template>

<script>

  import {mapGetters} from 'vuex'
  import {mapActions} from 'vuex'

  export default {
    computed:{
      products(){
        return this.$store.state.products;
      },
      ...mapGetters([
        "saleProducts"
      ])
    },
    methods:{
      ...mapActions([
        "reducePrice"
      ])
    }
  }
</script>

<style scoped>
  #product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
  }
  #product-list-one ul{
    padding: 0;
  }
  #product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
  }
  .price{
    font-weight: bold;
    color: #E8800C;
  }
</style>

B组件

<template>
  <div id="product-list-two">
    <h2>Product List Two</h2>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
     <button @click="reducePrice(10)">商品降价</button>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {mapActions} from 'vuex'

  export default {
    computed:{
      products(){
        return this.$store.state.products;
      },
      saleProducts(){
        return this.$store.getters.saleProducts;
      }
    },
      methods:{
      ...mapActions([
        "reducePrice"
      ])
    }
  }
</script>

<style scoped>
  #product-list-two{
    background: #D1E4FF;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
  }
  #product-list-two ul{
    padding: 0;
    list-style-type: none;
  }
  #product-list-two li{
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
  }
  .price{
    font-weight: bold;
    color: #860CE8;
    display: block;
  }
</style>