vue学习笔记四

企业级解决方案

vuex

vuex用于解决大量的、复杂的组件间共享数据的问题

通过new Vuex.Store(配置对象)创建仓库，通常，一个vue应用，对应一个仓库

配置对象中，可以配置下面的内容：

1. state：仓库的默认状态
2. mutations：配置的是状态有哪些变化，mutaion是状态变化的唯一原因
   1. mutaion的参数
      1. state
      2. payload
   2. 不可以直接调用mutaion，必须通过仓库对象.commit进行调用
      1. 参数1：mutaion的名称
      2. 参数2：payload
   3. mutation函数中不可以出现异步等副作用操作
      1. 没有ajax
      2. 没有dom处理
      3. 没有外部数据处理
      4. 没有当前时间
      5. 没有随机数
3. actions：配置副作用操作
   1. 每个action是一个函数
      1. 参数1：上下文对象，几乎等同于仓库对象
      2. 参数2：payload
   2. 不能直接调用action，必须通过仓库对象.dispatch调用
4. modules: 配置模块
   1. 模块中通常都会配置namespaced，以防止命名冲突，除了模块内部，外部在触发action或mutation时，必须添加模块名（命名空间）

vuex + vue：

1. 当配置了vuex后，所有vue实例都会出现一个属性: $store
2. 如果组件需要使用仓库中的数据，需要使用计算属性封装，可以使用Vuex.mapState函数简化操作