最能看懂的vuex教程【原创】

1.传统的组件之间传值

productListOne.vue

<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>
  </div>
</template>

<script>

  export default {
    props:{
      products:{
        type:Array  //我们的字段接受的类型为数组，还可以设定默认值 default
      }
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

productListTwo

<template>
  <div id="product-list-two">
    <h2>Product List Two</h2>
    <ul>
      <li v-for="product in products">
        <span class="name">{{product.name}}</span>
        <span class="price">${{product.price}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    props:[
      "products"
    ],
    components: {
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

app.vue

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

<script>
  import ProductListOne from './components/productListOne.vue'
  import ProductListTwo from './components/productListTwo.vue'
export default {
  name: 'app',
  components:{
    ProductListOne,
    ProductListTwo
  },
  data(){
    return{
      products:[
        {name:'马云',price:200},
        {name:'马化腾',price:140},
        {name:'马冬梅',price:23},
        {name:'马蓉',price:45},
      ]
    }
  }
}
</script>

<style>
body{
  color:#555
}
</style>

2.新建store文件夹下新建store.js文件

数据我们可以利用state存放数据

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:23},
      {name:'马蓉',price:45},
    ]
  }
});

我们的app.vue没有做变化，在我们的productListOne.vue和productListTwo.vue两个组件可以改为

<script>

  export default {
    computed:{
      products(){
        return this.$store.state.products //这里的this.$store为新建的store.js暴露的store对象
      }
    },
  }
</script>

main.js

import {store} from './store/store'

Vue.use(VueResource)
Vue.config.productionTip = false
Vue.prototype.$axios=axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

3.最终我们讲解getters,mutations,actions的用途，最后的文件代码

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:23},
      {name:'马蓉',price:45},
    ]
  },
  getters:{
    saleProducts:(state)=>{
        let saleProducts=state.products.map(  //这里的map为遍历state.products数组，返回我们要修改的格式
          product=>{
            return {
              name:'**'+product.name+'**',
              price:product.price / 2
            }
          }
        );
        return saleProducts;
    }
  },
  mutations:{
    reducePrice:(state,payload)=>{  //payload 为我们点击按钮的时候传过来的参数
      state.products.forEach(product=>{
        product.price-=payload
      })
    }
  },
  actions:{
    reducePrice:(context,payload)=>{ //actions更方便我们进行异步操作，payload我们进行接收和commit
      // setTimeout(function () {
        context.commit('reducePrice',payload)
      // },2000)
    }
  }
});

app.vue

<template>
  <div id="app">
    <product-list-one></product-list-one> //这里我们就不用传统的props来传值
    <product-list-two></product-list-two>
  </div>
</template>

<script>
  import ProductListOne from './components/productListOne.vue'
  import ProductListTwo from './components/productListTwo.vue'
export default {
  name: 'app',
  components:{
    ProductListOne,
    ProductListTwo
  }
}
</script>

<style>
body{
  color:#555
}
</style>

productListOne.vue

<template>
  <div id="product-list-one">
    <h2>Product List One</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(4)"> 商品降价</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;
//      },
      ...mapGetters([
        'saleProducts'  //我们要遍历的数组，为了方便引入了vuex提供的...mapGetters 就不用每一个方法写一个saleProducts(){return .....}
      ])
    },
    methods:{
      ...mapActions([
        'reducePrice'
      ])
//      reducePrice(amount){
////        this.$store.state.products.forEach(product=>{
////          product.price-=1
////        })
////        this.$store.commit('reducePrice')
//        this.$store.dispatch('reducePrice',amount)
//      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

productListTwo.vue

<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>
  </div>
</template>

<script>

  export default {
    computed:{
      products(){
        return this.$store.state.products
      },
      saleProducts(){
        return this.$store.getters.saleProducts;
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>