Vuex的使用

Vuex：主要应用于Vue.js中管理数据状态的一个库。
通过创建一个集中的数据存储，供程序中所有组件访问。
单一使用Vue.js的场景：

使用Vuex.js的场景：


store：相当于数据库存储数据
state：存储数据
getter：获取数据
mutations：触发事件，改变状态
actions：异步逻辑可以包含任意异步操作，提交的mutation，而不是直接变更状态
什么情况下应该使用Vuex
虽然Vuex可以帮助我们管理共享的状态，但也附带了更多的概念和框架，这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
main.js

import Vue from 'vue'
import App from './App'
import {store} from './store/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store:store,
  el: '#app',
  components: { App },
  template: '<App/>'
})

store.js

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}
        ]
    },
    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);
            },2000);
        }
    },
})

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>

productListOne.vue

<template>
  <div id="product-list-one">
      <h2>product-list-one</h2>
      <ul> 
        <li v-for="(product,index) in saleProducts" :key="index">
            <span>{{product.name}}</span>
            <span>￥{{product.price}}</span>
        </li>
      </ul>
      <button @click="reducePrice(4)">商品降价</button>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'
export default {
  name:'product-list-one',
  computed:{
      products(){
          return this.$store.state.products;
      },
    //   saleProducts(){
    //       return this.$store.getters.saleProducts;
    //   }相当于下面的内容
      ...mapGetters([
          "saleProducts"
      ])
  },
  methods:{
      reducePrice:function(amount){
        //   this.$store.state.products.forEach(product=>{
        //       product.price-=1;
        //   })
        //this.$store.commit('reducePrice');
        this.$store.dispatch('reducePrice',amount);
      }
      //作用和上面一样，不过用的时候需要先引入mapActions
        //   ...mapActions([
        //       "reduceProce"
        //   ])
  }
}
</script>

productListTwo.vue

<template>
  <div id="product-list-two">
      <h2>product-list-two</h2>
       <ul> 
        <li v-for="(product,index) in saleProducts" :key="index">
            <span>{{product.name}}</span>
            <span>￥{{product.price}}</span>
        </li>
      </ul>
  </div>
</template>
<script>
export default {
  name:'product-list-two',
  computed:{
      products(){
          return this.$store.state.products;
      },
      saleProducts(){
          return this.$store.getters.saleProducts;
      }
  }
}
</script>