Vuex

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

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

回顾组件

Index.vue

ProductListOne

ProductListTwo

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: ''
})

Index.vue

ProductListOne.vue

改变名字，价格打折
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

降价

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)
    }
}

组件

降价
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/