VUE疑难问题---3、vue结构图

VUE疑难问题---3、vue结构图

一、总结

一句话总结：

vuex中的state帮外部组件管理数据，mutations负责修改state中的数据，actions负责执行外部组件的方法并且操作vuex中的mutations来更新state，getters对state数据进行修饰方便外部组件调用

 

 

1、vuex中发送和接收后端ajax数据的是哪个版块？

是actions，我们可以在actions中发送和接收后端ajax数据

 

2、组件中获取vue中的数据（状态）有哪些方式？

可以直接从state中拿，也可以从getters中 间接的拿

 

3、vuex的简写方式？

可以用mapState、mapActions、mapGetters等来代替this.$store.state、this.$store.dispatch、this.$store.getters等，这样可以极大的简化代码

<template>
    <div>
        <div>click {{count}} times, count is {{evenOrOdd}}</div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment async</button>
        <button @click="increment3">increment 3</button>
    </div>
</template>

<script>
    import {mapState,mapActions,mapGetters} from 'vuex';
    export default {
        name: "Counter",
        data:function () {
            return {};
        },
        computed:{
            ...mapState(['count']) 的运行过程是什么
            先调用, //mapState()返回值：{count(){ return this.$store.state['count']}}
            ...mapGetters(['evenOrOdd']), //mapGetters()返回值：{evenOrOdd(){ this.$store.getters['evenOrOdd'] }}
        },
        methods:{
            ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3'])
        }
    }
</script>

<style scoped>
button{
    margin-right: 10px;
}
</style>

 

 

4、vuex的适用场景？

只有共享的数据，才有权利放到vuex中；组件内部私有的数据，放到组件的data中即可

Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间传值了，如果组件的数据不需要共享，此时，这些不需要共享的私有数据，没有必要放到vuex中；

 

 

 

二、vue结构图

博客对应课程的视频位置：