vue（21）初识Vuex

Vuex是做什么的？

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

  • 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

• 状态管理到底是什么？

  • 状态管理模式，集中式状态管理这些名词听起来就非常高大上，让人捉摸不透
  • 其实你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象中
  • 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用
  • 那么，多个组件是否可以共享这个对象中的所有变量属性了呢？

管理什么状态呢？

• 但是有什么状态需要我们在多个组件中共享的呢？
  • 如果你做过大型项目，你一定遇到过多个状态，在多个界面中共享的问题
  • 比如用户的登录状态、头像、信息、地理位置等等
  • 比如商品的收藏，购物车中的物品等等
  • 这些状态信息，我们都可以放在同一的地方，对它进行保存和管理，而且它们还是响应式的

单页面状态管理

• 我们知道，要在单个组件中进行状态管理是一件非常简单的事情，我们来看下图
  
  

• 图中的3个状态，解释如下：

  • State：就是我们的状态（姑且可以当做是data中的属性）；
  • VIew：视图层，可以针对state的变化，显示不同的信息；
  • Actions，这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

代码如下：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

多界面状态管理

• Vue已经帮我们做好了单个界面的状态管理，但如果是多个界面呢？
  • 多个视图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
  • 不同界面的Actions都想修改同一个状态（比如：Home.vue要修改，Profile.vue也需要修改这个状态）
• 也就是说对于某些状态（状态1/状态2/状态3）来说只属于我们某一个视图，但是也有一些状态（状态a/状态b/状态c）属于多个视图共同想要维护的
  • 状态1/状态2/状态3你放在自己的房间，你自己管理自己用，没问题
  • 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理
  • 那么Vuex就是帮助我们统一管理的大管家
• 全局单例模式
  • 我们现在要做的就是将共享的状态抽离出来，交给我们的大管家进行统一管理
  • 之后，我们的每个视图，按照规定好的规定，进行访问和修改操作
  • 这就是Vuex背后的思想

Vuex状态管理图例