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>