Vuex中的核心概念

Vuex中的核心概念

本文主要归纳总结Vuex.Store实例化过程中传入对象的属性。如下面的store, getter, mutations, actions属性；

// store.js
const store = Vuex.Store({
        state: {
                count: 0,
                todos: [
                    {
                        {id: 1, done: true},
                        {id: 2, done: false}
                    }
                ]
            },
        getters: {
                doneTodos: state => {
                    state.todos.filter(todo => todo.done)
                }
            },
        mutations: {
                increment: state => state.count++
            },
        actions: {
                increment: context => {
                    context.commit('increment');
                },
                incrementAsync ({commit}) {
                    setTimeout(() => {
                            commit('increment');
                        }, 1000)
                }
        }
    })
module.exports = store;

state, getters, mutations, actions联系与区别

• states中管理这所有的数据状态
• getters中则保存的是由state派生出来的状态，默认传入的参数为state
• mutations中保存着用来改变state状态的方法，只能包含同步操作，state更改只能在这进行，默认传入的参数为state
• actions中保存的也是改变state状态的方法，但是是通过提交mutations来修改的，可以是异步操作，默认传入的参数为context

子组件中使用state中的状态与派生状态

1. 首先将store添加到根Vue中

// app.js
const store = require('store.js')
var app = new Vue({
        components: {
            com1,
            com2
        }
        store
    })

1. 在组件中调用

// com1.vue
<template>
    <div> {{ count }} </div>
</template>
<script>
    export default {
        data () {
            return {
                localCount: 0
            }
        },
        computed: {
            // 获取state中状态
            count () {
                return this.$store.state.count;
            }
            // 获取派生状态
            doneTodos () {
                return this.$store.getters.doneTodos;
            }
        }
    }
</script>

也可以使用辅助函数mapState,mapGetters

// com1.vue
<template>
    <div> {{ count }} </div>
</template>
<script>
    import { mapState, mapGetters } from 'vuex';
    export default {
        data () {
            return {
                localCount: 0
            }
        },
        computed: {
            ...mapState({
                count: state => state.count
            }),
            ...mapGetters({
                doneTodos: getters => getters.doneTodos
            })
        }
    }
</script>

子组件中改变state

在子组件中提交mutations或者分发actions

// com1.vue
<template>
    <div> {{ count }} </div>
</template>
<script>
    export default {
        methods: {
            increment () {
                this.$store.commit(increment);
                this.$store.dispatch(incrementAsync);
            }
        }
    }
</script>