vuex

1.state

在store中定义数据，在组件中直接使用

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
    state:{},
    getters:{},
    mutations:{},
    actions:{},
    modules:{}
})

目录：home.vue

<template>
    <div>
        home{{$store.state.num}}
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

目录：about.vue

<template>
    <div>
        about{{num}}
    </div>
</template>

<script>
    export default {
        computed:{
            num(){
                return this.$store.state.num
            }
        }
    }
</script>

<style scoped>

</style>

2.getters

将组件中统一使用的 computed都放getters里面来操作

export default new Vuex.Store({
    // state相当于组件中的data，专门用来存放全局的数据
    state:{
        num:0
    },
    // getters相当于组件中的computed,getters是全局的，computed是组件内部使用的
    getters:{
        num(state){
            return state.num
        }
    },
    mutations:{},
    actions:{},
    modules:{}
})

home.vue

<template>
    <div>
        home{{$store.getters.num}}
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

3.mutations

更改vuex的store中的状态的唯一方法是提交mutation

export default new Vuex.Store({
    // state相当于组件中的data，专门用来存放全局的数据
    state:{
        num:0
    },
    // getters相当于组件中的computed,getters是全局的，computed是组件内部使用的
    getters:{
        num(state){
            return state.num
        }
    },
    // mutations相当于组件中的methods，但是不能使用异步方法（定时器，axios）
    mutations:{
        //
        add(state,playload){
            state.num+=playload?playload:1
        }
    },
    actions:{},
    modules:{}
})

目录btn.vue

<template>
    <div>
        <button @click="$store.commit('add',2)">按钮</button>
    </div>
</template>

<script>
    export default {
        methods:{
        //     addFn(){
        //         //调用store中的mutations里面的add方法
        //         // 传参使用payload
        //         this.$store.commit('add',2)
        //     }
        }
    }
</script>

<style scoped>

</style>

4.actions

actions是store中专门用来处理异步的，实际修改状态值的，还是mutations

export default new Vuex.Store({
    // state相当于组件中的data，专门用来存放全局的数据
    state: {
        num: 0
    },
    // getters相当于组件中的computed,getters是全局的，computed是组件内部使用的
    getters: {
        num(state) {
            return state.num
        }
    },
    // mutations相当于组件中的methods，但是不能使用异步方法（定时器，axios）
    mutations: {
        //
        add(state, playload) {
            state.num += playload ? playload : 1
        },
        reduce(state) {
            state.num --
        }
    },
    // actions专门用来处理异步，实际修改状态值的，依然是mutations
    actions: {
        reduceAsync(context){
            context.commit('reduce')
        }
    },
    modules: {}
})

btn.vue

<template>
    <div>
        <button @click="$store.commit('add',2)">按钮</button>
        <button @click="$store.dispatch('reduceAsync')">按钮</button>
    </div>
</template>

<script>
    export default {
        methods:{
        //     addFn(){
        //         //调用store中的mutations里面的add方法
        //         // 传参使用payload
        //         this.$store.commit('add',2)
        //     }
        }
    }
</script>

<style scoped>

</style>

5.map*

mapState和mapGetters在组件中都是写在computed里面

<template>
    <div>
        about{{getnum}}
　　　　　home{{num}}
　　</div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {mapState} from 'vuex'
    export default {
      computed: {
          ...mapState(['num'])
      }
    }
    export default {
        computed:{
            ...mapGetters(['getnum'])
        }
    }

</script>

mapMutations和mapActions在组件中都是写在methods里面

<template>
    <div>
        <button @click="add()">按钮</button>
        <button @click="reduceAsync()">按钮</button>
    </div>
</template>

<script>
    import {mapMutations,mapActions} from 'vuex'
    export default {
        methods:{
            //     addFn(){
            //         //调用store中的mutations里面的add方法
            //         // 传参使用payload
            //         this.$store.commit('add',2)
            //     }

            ...mapMutations(["add"]),
            ...mapActions(["reduceAsync"])
        }
    }
</script>

<style scoped>

</style>