vue 之 关于vuex的一个小demo

实现效果：

准备环境：
vue-cli :

如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载

安装vue cli3.0+：npm install -g @vue/cli

查看版本：vue --version

创建项目：vue create Productsale

vuex:

vuex 安装： vue add vuex

npm install -save vuex

vuex为专门为vue.js应用程序开发的状态管理可以理解为全局的数据管理。

vuex主要由五部分组成：state、getters、mutation、action、mudle组成。

App.vue

<template>
  <div id="app">
    <product-list-one></product-list-one>
    <product-list-two></product-list-two>

  </div>
</template>
<script>
import ProductListOne from './components/ProductListOne'
import ProductListTwo from './components/ProductListTwo'
export default {
  name: 'app',
  components: {
    'product-list-one': ProductListOne,
    'product-list-two': ProductListTwo
  },
  data () {
    return {}
  }
}
</script>
<style lang="less">
body {
  font-family: Ubuntu;
}
</style>

ProductListOne.vue

<template>
  <div class="product-list-one">
    <h2>Product List One</h2>
    <ul>
      <li v-for="(item,index) in saleProducts"
          :key="index">
        <span class="name">{{item.name}}</span>
        <span class="price"> ${{item.price}}</span>
      </li>
    </ul>
    <button @click="reducePrice(4)">商品降价</button>
  </div>
</template>
 
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'one',
  computed: {
    products () {
      return this.$store.state.products;
    },
    ...mapGetters([
      "saleProducts"
    ])
    // saleProducts () {
    //   return this.$store.getters.saleProducts;
    //   // var saleProducts = this.$store.state.products.map(product => {
    //   //   return {
    //   //     name: "**" + product.name + "**",
    //   //     price: product.price / 2
    //   //   }
    //   // });
    //   // return saleProducts;
    // }
  },
  methods: {
    ...mapActions([
      "reducePrice"
    ])
    // reducePrice: function (amount) {
    //   // this.$store.commit('reducePrice');  // 调用 mutations 中的方法； 
    //   this.$store.dispatch("reducePrice", amount);  // 异步调取

    //   // this.$store.state.products.forEach(product => {
    //   //   product.price -= 1;
    //   // })
    // }
  },
  // props: {
  //   products: {
  //     type: Array,
  //     products: "products"
  //   }
  // },
  // props: ["products"],
  data () {
    return {

    }
  }
}
</script>
 
<style scoped lang = "less">
.product-list-one {
  width: 800px;
  margin: 0 auto;
  background: #fff8b1;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  padding: 10px 20px;
  ul {
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
      margin: 10px 10px 0 0;
      padding: 20px;
      background: rgba(255, 255, 255, 0.7);
      .price {
        font-weight: bold;
        color: #e8800c;
      }
    }
  }
}
</style>

ProductListTwo.vue

<template>
  <div class="product-list-two">
    <h2>Product List Two</h2>
    <ul>
      <li v-for="(item,index) in saleProducts"
          :key="index">
        <span class="name">{{item.name}}</span>
        <span class="price">${{item.price}}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'two',
  computed: {
    products () {
      return this.$store.state.products;
    },
    saleProducts () {
      return this.$store.getters.saleProducts;
      // var saleProducts = this.$store.state.products.map(product => {
      //   return {
      //     name: "**" + product.name + "**",
      //     price: product.price / 2
      //   }
      // });
      // return saleProducts;
    }
  },
  // props: {
  //   products: {
  //     type: Array,
  //     products: "products"
  //   }
  // },
  // props: ["products"],
  data () {
    return {

    }
  }
}
</script>
 
<style scoped lang = "less">
.product-list-two {
  width: 800px;
  margin: 0 auto;
  background: #d1e4ff;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  padding: 10px 20px;
  ul {
    padding: 0;
    list-style-type: none;
    li {
      margin: 10px 10px 0 0;
      padding: 20px;
      background: rgba(255, 255, 255, 0.7);
      .price {
        font-weight: bold;
        color: #860ce8;
        display: block;
      }
    }
  }
}
</style>

store -> index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    products: [{
        name: "马云",
        price: 200
      },
      {
        name: "马化腾",
        price: 60
      },
      {
        name: "刘强东",
        price: 90
      },
      {
        name: "李彦宏",
        price: 160
      },
    ]
  },
  getters: {
    saleProducts: (state) => {
      var saleProducts = state.products.map(product => {
        return {
          name: "**" + product.name + "**",
          price: product.price / 2
        }
      });
      return saleProducts;
    }

  },
  mutations: {
    reducePrice: (state, payload) => {
      state.products.forEach(product => {
        product.price -= payload;
      })
    }
  },
  actions: { // 异步时调用
    reducePrice: (context, payload) => {
      setTimeout(function () {
        context.commit("reducePrice", payload); // 把调用 mutations 中的方法放到了这里；
      })
    }
  },
  modules: {}
})

一个简单的小案例。。