Vuex介绍及简单应用

Vuex是做什么的

官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式

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

管理什么状态呢？

• 比如用户的登录状态、用户名称、头像、地理位置信息等等
• 比如商品的收藏、购物车中的物品等等
• 这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

Vuex的简单使用

使用之前要先安装vuex，并且在chrome商店下载devtools插件

对以上操作做简单小节：
1.提取出一个公共的store对象，用于保存在多个组件中共享的状态。
2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到。
3.在其他组件中使用store对象中保存的状态即可

• 通过this.$store.state属性的方式来访问状态
• 通过this.$store.commit(‘mutation中的方法’)来修改状态
  注意事项：
  我们是通过提交mutation的方式而非直接改变store.state.count来修改状态。
  这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。