Vuex

Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 和单纯的全局对象有以下两点不同

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

回顾组件

Index.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 './ProductListOne'
import ProductListTwo from './ProductListTwo'
export default {
    name: 'Index',
    components: {
        'product-list-one': ProductListOne,
        'product-list-two': ProductListTwo
    },
    data(){
        return {
            products: [
                {name: 'apple', price: 200},
                {name: 'pear', price: 140},
                {name: 'banana', price: 20},
                {name: 'mango', price: 10},
            ]
        }
    }
}
</script>

ProductListOne

<template>
    <div>
        <h2>1</h2>
        <ul>
            <li v-for="product in products" :key="product+Math.random()*Date.now()">
                <span class="name">{{product.name}}</span>
                <span class="price">{{product.price}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data(){
        return {

        }
    }
}
</script>

<style scoped>
    div{
        font-weight: bold;
        color: #f0f;
    }
</style>

ProductListTwo

<template>
    <div>
        <h2>2</h2>
        <ul>
            <li v-for="product in products" :key="product+Math.random()*Date.now()">
                <span class="name">{{product.name}}</span>
                <span class="price">{{product.price}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data(){
        return {

        }
    }
}
</script>

store.js

state

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

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        products: [
            {name: 'apple', price: 200},
            {name: 'pear', price: 140},
            {name: 'banana', price: 20},
            {name: 'mango', price: 10},
        ]
    }
})

main.js

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

new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

Index.vue

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

<script>
import ProductListOne from './ProductListOne'
import ProductListTwo from './ProductListTwo'
export default {
    name: 'Index',
    components: {
        'product-list-one': ProductListOne,
        'product-list-two': ProductListTwo
    },
    data(){
        return {
            // 把数据移到store的state里了
        }
    }
}
</script>

ProductListOne.vue

<template>
    <div>
        <h2>1</h2>
        <ul>
            <li v-for="product in products" :key="product+Math.random()*Date.now()">
                <span class="name">{{product.name}}</span>
                <span class="price">{{product.price}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    computed: {
        products(){
            // 接收store的数据
            return this.$store.state.products;
        }
    },
    data(){
        return {
            
        }
    }
}
</script>

改变名字，价格打折
ProductListTwo.vue

v-for="product in saleProducts"

computed: {
    saleProducts(){
        return this.$store.state.products.map(product=>{
          return  {
              name: `**${product.name}**`,
              price: product.price/2
            }
        });
    }
}

如果在组件ProductListOne.vue也要改名打折，复制即可，但成百上千个组建也需要呢？就用到getters了。

getters

store.js

getters: {
    saleProducts(state){
        return state.products.map(product=>{
          return  {
              name: `**${product.name}**`,
              price: product.price/2
            }
        });
    }
}

ProductListOne.vue或其他需要用到的组件

computed: {
    saleProducts(){
        return this.$store.getters.saleProducts;
    }
}

Mutations

store.js

mutations: {
    reducePrice: state=>{
        state.products.forEach(p=>{
            p.price -=1;
        })
    }
}

组件的methods

<button @click="reductPrice">降价</button>

reducePrice(){
    this.$store.commit('reducePrice')
}

Actions

如果把mutations改为异步，即

mutations: {
    reducePrice: state=>{
        setTimeout(function(){
            state.products.forEach(p=>{
                p.price -=1;
            })
        },3000)
    }
}

这样在页面上呈现效果（3000ms后）和Vue Devtools Vuex调试（立即）不一致。但是在actions里面就可以了。

actions: {
    reducePrice: context => {
        setTimeout(function(){
            context.commit('reducePrice'); // mutations的reducePrice
        },3000)
    }
}

传参数

mutations 和 actions

mutations: {
    reducePrice: (state,num)=>{
        state.products.forEach(p=>{
            p.price -=num;
        })
    }
},
actions: {
    reducePrice: (context,num) => {
        setTimeout(function(){
            context.commit('reducePrice',num); // mutations的reducePrice
        },3000)
    }
}

组件

<button @click="reducePrice(4)">降价</button>
4是实参

methods: {
    reducePrice(amount){ // amount是形参
        this.$store.dispatch('reducePrice',amount)
    }
}

如果 actions 里面有多个方法呢，不可能完全在methods里面列举，就可以在组件中这样解决。

import {mapGetters, mapActions} from 'vuex'

export default{
    computed: {
        ...mapGetters(['saleProducts'])
    },
    methods: {
        ...mapActions(['reducePrice'])
    }
}

https://vuex.vuejs.org/zh/