携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

Vuex what？

我们先看下官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
- 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
状态管理到底是什么？
- 状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。
- 其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
- 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
- 多个组件是不是就可以共享这个对象中的所有变量属性了呢？
Vuex为什么要它
- 难道我们不能自己封装一个对象来管理吗？
  - 当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。
- 如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

管理状态？

有什么状态时需要我们在多个组件间共享的呢？
- 如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。
- 比如用户的登录状态、用户名称、头像、地理位置信息等等。
- 比如商品的收藏、购物车中的物品等等。
- 这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。

现在是不是清楚点了

单页面状态管理

<template>
    <div class="test">
        <div>当前计数：{{counter}}</div>
        <button @click="counter+=1">+1</button>
        <button @click="counter-=1">-1</button>
    </div>
</template>
<script>
export default{
    name:'Helloworld',
    data (){
        return{
            counter:0
        }
    }
}
</script>
<style scoped>
</style>

上面这个例子中，counter是不是需要状态管理呢。counter需要某种方式被记录下来，也就是我们的State。 counter目前的值需要被显示在界面中，也就是我们的View部分。界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

多页面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？
- 多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
- 不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）
- 也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的
全局单例模式
- 我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。这就是Vuex背后的基本思想。

初识vuex

Vuex what？

管理状态？

单页面状态管理

多页面状态管理