Vuex (状态管理) 扫盲 (Vue2.x)

Vuex 状态管理

Vuex是Vue配套的公共数据管理工具，它可以把一些共享的数据，保存到Vuex中，方便整个程序中的任何组件直接获取或修改我们的公共数据。

Vuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库。

• 只有共享的数据，才有权利放到Vuex中
• 组件内部私有的数据，只要放到组件的data中即可

Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到Vuex中，而不必通过 父子组件之间传值 了，如果组件的数据不需要共享，此时，这些不需要共享的私有数据，没有必要放到Vuex中。

props: 对外公开属性
data:  私有属性
Vuex:  全局共享属性

// 创建 Store 对象 => 数据仓储对象
cosnt store = new Vuex.Store({
  /*
    state属性: 需要共享的数据都定义在state属性对象中
      组件中调用: this.$store.state.xxx
  */
  state: { count: 0 },
  /*
    mutations属性：如果要皂搓store中的state值，通过mutations属性对象定义的方法，这是Vuex的规范
      组件中调用: this.$store.commit('方法名')
      [注]：最多支持2个参数
        param1: 永远是state属性
        param2: 由调用者传入，参数类型不限
      [注]：Vuex数据变更后有通知机制
  */
  mutations: {
    subtract(state, obj) {
      console.log(obj)
      state.count -= (obj.c + obj.d)
    }
  },
  /*
    包装数据
      当访问state中的数据，不是直接显示，而是需要包装一下。
      如果在每个组件中都去添加这个字符串，很糟糕的做法。
    Store对象中，通过定义getters方法，可以将state中的数据包装后对外提供，类似Vue中的过滤器功能。
    [注]
       1. getters只负责对外提供数据
       2. 调用方式: this.$store.getters.xxx
       3. 如果getters引用的state中的属性，发生变化了，
          就会立即触发getters的重新求值
  */
  getters: {
    currentCount(state) {
      return `当前的count = ${state.count}`
    }
  }
})

new Vue({
  render: h => h(App),
  // store对象挂载到VM实例中
  store
}).$mount('#app')