vuex全局数据管理

vuex介绍

组件关系和通信方案

序号	组件关系	数据通信
1	父子关系	子传父：$emit ；父传子：props
2	非父子关系	eventBus: $on + $emit
3	非父子关系	vuex

vuex使用场景

vuex使用流程

vuex核心概念-state

getters派生状态(计算属性)

语法如下:

1.现在getters中声明一个计算属性

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    计算属性名: function(state) {
      return 要返回的值
    }
  }
})

2.使用getter中的计算属性

$store.getters.getter的名字

vuex核心概念-Mutations

vuex辅助函数-mapState

vuex核心概念actions

actions语法如下:

（1）定义格式

这个地方的载荷一般为ajax接口需要的参数，如果没有就不用传

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

（2）调用格式