Vuex如何使用（一）—— 什么是Vuex？

如果你是新手（前提：您了解过vue，否则可能有些吃力） 或 不知道如何上手，请您看下去…

什么是Vuex?

定义

1. vuex是专门负责 Vue.js 开发中的状态管理。
   vuex可以集中 存储、管理 应用下所有组件的状态

什么是状态管理？

1. 首先咱们先看段代码

<template>
    <!-- view -->
    <div class="demo-body">
        <button @click="clickMe">点我+</button>
        <p>点击次数：{{count}}</p>
    </div>
</template>
<script>
    export default {
        name: 'vuex-demo',
        // state
        data() {
            return{
                count: 0,   // 计数初始值
            }
        },
        // actions
        methods: {
            clickMe(){
                this.count++;
            }
        },
    }
</script>

上述代码中，我使用的 vue-cli脚手架 工具实现的。
代码中，状态自管理包含以下3个部分：

1. state： 驱动应用数据源（ 就是data里面的必须定义的常量 ）
2. view： 以声明方式将 state 映射到视图（就是通过state进行数据驱动，对html进行渲染重构 ）
3. actions： 用户操作view时，也会相应的改变state的状态，实现MVVM

上述是vue的核心，虽然操作简单，但是问题也来了：

1. 多个视图依赖同一个状态
2. 不同的视图需要变更同一个状态

针对问题1：
（1）组件中通过传参改变状态（也就是data里面的常量） 特别繁琐；（2）有的兄弟组件之间甚至无法传递

针对问题2：
（1） 我们经常会采用父子组件 或者 通过多个事件来变更一个状态

以上的这些模式非常脆弱，通常会导致无法维护的代码。
所以我们将公共的部分抽出来，以一个全局模式去管理。在当前模式下，无论在任何位置，任何组件都能获取到该状态 和 对应的事件触发！

vuex官方定义：

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么情况下使用Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。