vue-interview(10/11/12)

10. 简单说一说vuex使用及其理解？

vue中状态管理（登陆验证，购物车，播放器等）

vuex 数据流程

1-1 vuex 介绍

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 提交修改信息， Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作 ( 常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action ，但 Action 也是无法直接修改 State 的，还是需要通过Mutation 来修改State的数据。最后，根据 State 的变化，渲染到视图上。

1-2 vuex 中核心概念

state ： vuex 的唯一数据源，如果获取多个 state ,可以使用 ...mapState 。

export const store = new Vuex.Store({ 
    // 注意Store的S大写 
    //<!-- 状态储存 --> 
    state: { 
        productList: [ 
            { name: 'goods 1', price: 100 }
        ] 
    } 
})

getter : 可以将 getter 理解为计算属性， getter 的返回值根据他的依赖缓存起来，依赖发生变化才会被重新计算。

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

Vue.use(Vuex)
export const store = new Vuex.Store({ 
    state: {
        productList: [ 
            {name: 'goods 1', price: 100 },
        ] 
    },
    // 辅助对象 mapGetter 
    getters: { 
        getSaledPrice: (state) => { 
            let saleProduct = state.productList.map((item) => { 
                
                return { 
                    name: '**' + item.name + '**', price: item.price / 2 
                } 
            })
            
            return saleProduct; 
        } 
    }
})

页面使用

// 获取getter计算后的值 
export default { 
    data () { 
        return {
            productList : this.$store.getters.getSaledPrice 
        }
    } 
}

mutation ：更改 state 中唯一的方法是提交 mutation 都有一个字符串和一个回调函数。回调函数就是使劲进行状态修改的地方。并且会接收 state 作为第一个参数 payload 为第二个参数， payload 为自定义函数， mutation 必须是同步函数。

// 辅助对象 mapMutations 
mutations: { 
    //<!-- payload 为自定义函数名--> 
    reducePrice: (state, payload) => { 
        return state.productList.forEach((product) => { 
            product.price -= payload; 
        }) 
    } 
}

// <!-- 页面使用 --> 
methods: {
    reducePrice(){ 
        this.$store.commit('reducePrice', 4) 
    } 
}

action ： action 类似 mutation 都是修改状态，不同之处, action 提交的 mutation 不是直接修改状态

action 可以包含异步操作，而 mutation 不行

action 中的回调函数第一个参数是 context ，是一个与 store 实例具有相同属性的方法的对象

action 通过 store.dispatch 触发， mutation 通过 store.commit 提交

actions: { 
    // 提交的是mutation，可以包含异步操作 
    reducePriceAsync: (context, payload) => { 
        setTimeout(()=> { 
            context.commit('reducePrice', payload); 
            // reducePrice为上 一步mutation中的属性 
        },2000) 
    }
}