Vuex的认识和简单应用（一）

一、vuex是一个专为vue.js应用程序开发的状态管理模式。

应用场景：
1、多个视图依赖于同一个状态
2、来自不同视图的行为需要变更同一个状态
此时，我们可以把组件的共享状态抽取出来，以一个全局单例模式管理

二、Vuex和单纯的全局对象有以下两点不同：

1、Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、不能直接改变store中的状态。改变store中的状态的唯一途径就是显示地提交(commit)mutation。

state:Vuex的状态存储
getter:vuex允许我们在store中定义"getter"（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutation:更改vuex的store中的状态的唯一方法是提交mutation
mutation必须同步执行

action:action提交的事mutation,而不是直接变更状态

action可以包含任意异步操作

三、简单应用

store.js

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

 Vue.use(Vuex)

 export default 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: {//异步mutations操作
     reducePrice:(context,payload)=>{
       setTimeout(function(){
         context.commit('reducePrice',payload);
       },2000)
     }
   }
 })

Production.vue

 <template>
   <div id="product-list-one">
       <h2>Product List One</h2>
       <ul>
           <li v-for="product in saleProducts" :key="product.name">
               <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"
       ])
     //   saleProducts(){
     //       return this.$store.getters.saleProducts;
     //   }
   },
   methods:{
       /*reducePrice:function(amount){
           //this.$store.commit('reducePrice');
           this.$store.dispatch("reducePrice",amount);
       }*/
       ...mapActions([
           "reducePrice"
       ])
   }
 }
 </script>
 <style>

 </style>