Vuex

Vuex是类似Flux的状态管理库，专门用于Vue的状态管理。

对于那些不熟悉的人来说，Flux是Facebook创造的一种设计模式。Flux模式由四个部分组成，组成单向数据管道：

image

Vuex的灵感主要来自Flux和Elm Architecture。Vuex集成的核心是Vuex存储。

// store.js
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

Vuex存储（Vuex Store）包含四个对象：state、mutations、actions和getters。

state 只是一个包含需要在应用程序中共享的属性的对象。

// store.js
const state = {
    numbers: [1, 2, 3]
}

这个state对象只包含了一个numbers数组。

mutations是负责直接改变存储状态的函数。在Vuex中，mutations总是以state作为第一个参数。此外，actions也可以不作为第二个参数传递有效负载：

// store.js
const mutations = {
    ADD_NUMBER(state, payload) {
        state.numbers.push(payload)
    }
}

在Flux架构中，mutations中的函数通常用大写字母表示，以区别于其他函数，并用于工具和lint目的。在上面的示例中，创建了一个ADD_NUMBER()的mutations，它需要一个有效的payload并将该有效的payload推送到state.numbers数组中。

actions可以调用mutations。在提交mutations之前，actions还负责所有异步调用。actions可以访问context对象，该对象提供对state（使用context.state）、getter（使用context.getters）和commit函数（context.commit）的访问。

下面是一个简单的actions的示例，它只是传递预期的有效负载时直接提交mutations：

// store.js
const actions = {
    addNumber(context, number) {
        context.commit('ADD_NUMBER', number)
    }
}

Vuex存储中的getters就像组件中的计算属性一样。getters主要用于执行一些计算和操作，以便在组件访问这些信息之前存储状态。

像mutations一样，getters可以访问state作为第一个参数。这里有一个叫getNumbers的getter，它只返回state.numbers数组：

// store.js
const getters = {
    getNumbers(state) {
        return state.numbers
    }
}

最后store.js的代码如下所示：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    numbers: [1, 2, 3]
};

const mutations = {
    ADD_NUMBER(state, payload) {
        state.numbers.push(payload);
    }
};

const actions = {
    addNumber(context, number) {
        context.commit("ADD_NUMBER", number);
    }
};

const getters = {
    getNumbers(state) {
        return state.numbers;
    }
};

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

对于这样简单的一个示例，可能不一定需要Vuex存储。上面的示例只是用来向大家展示如何使用Vuex和简单的全局存储在实现上的直接区别。

当Vuex存储准备好之后，Vue应用程序可以在Vue实例中声明store对象，可以提供给Vue应用程序使用。

// main.js
import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
    el: '#app',
    store,
    components: {
        App
    },
    template: '<App />'
})

有了Vuex存储之后，组件通常可以执行以下两种操作之一。他们要么：获取（GET）状态信息（通过访问store中state或getters）或者调用（DISPATCH）actions。

下面创建的NumberDisplay组件，它通过将getNumbers存储getter映射到组件getNumbers计算属性来直接显示state.numbers数组。

<!-- NumberDisplay.vue -->
<template>
    <div>
        <h2>{{ getNumbers }}</h2>
    </div>
</template>

<script>
    export default {
        name: 'NumberDisplay',
        computed: {
            getNumbers() {
                return this.$store.getters.getNumbers
            }
        }
    }
</script>

接着再创建一个NumberSubmit组件，允许用户通过addNumber方法映射到同名的actions，然后将新输入的数字添加到state.numbers：

<!-- NumberSubmit.vue -->
<template>
    <div class="form">
        <input v-model="numberInput" type="number" />
        <button @click="addNumber(numberInput)">Add new number</button>
    </div>
</template>

<script>
    export default {
        name: 'NumberSubmit',
        data: () => ({
            numberInput: 0
        }),
        methods: {
            addNumber(numberInput) {
                this.$store.dispatch('addNumber', Number(numberInput))
            }
        }
    }
</script>

最后在App.vue中引入前面创建的组件：

<!-- App.vue -->
<template>
    <div id="app">
        <NumberDisplay/>
        <NumberSubmit/>
    </div>
</template>

<script>
    import NumberDisplay from "./components/NumberDisplay";
    import NumberSubmit from "./components/NumberSubmit";

    export default {
        name: "App",
        components: {
            NumberDisplay,
            NumberSubmit
        }
    };
</script>

我们可以看到，Vuex通过引入显式定义的actions、mutations和getters 扩展了简单的存储方法。这就是使用Vuex的最初标准和主要优势所在。此外，Vuex和vue-devtools集成在一起，提供了更易的调试功能。

下图就是一个关于vue-devtools如何帮助我们在发生突变时观察存储信息：