Vuex4

peaky
67 阅读4分钟

一、概述

  1. 是什么：
    • 一个专为vue.js应用程序开发的状态管理模式+库（就是一个数据状态管理仓库）
  2. 干什么：
    • 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
  3. 适用场景：
    • 多个组件需要共享状态时
      • 注意：这时如果采用传参会非常繁琐，还不如把组件的共享状态抽取出来，以一个全局单例模式管理

二、怎么用：

  1. 安装：
    • npm install vuex@next --save/yarn add vuex@next --save
  2. 构建Store并安装（Vuex应用的核心，一个Vue应用只能有一个store实例）
    • Store是什么：
      • 包含着应用中大部分状态的容器
    • 构建方式：
      • 数据较多时，建议采取模块化
        • 模块化指：
          • 将数据按照功能进行模块划分，使得每个模块都拥有各自的独立空间，便于数据管理
        • 具体做法（一种示例）：
          • 在src/store文件夹下新建modules文件夹，下面存放各个模块的相关文件（.js）
        • 关于模块文件：
          • mutation,getter接收的第一个参数为模块的局部状态对象
          • action里，局部状态通过'context.state'暴露出来，根节点状态为'context.rootState'
          • getter里，根节点状态会作为第三个参数暴露出来
          • action，mutation，getter注册在全局命名空间
      • 创建vuex对象（我采取了模块化）
        • 在src/store文件夹下新建index.js文件
          • 使用createStore()来创建vuex对象/store实例
          • 引入模块：
            • createStore({modules:{模块化文件其名称1,名称2...})
      • 安装store实例：
        • 应用实例名.use(store实例名)
          • vuex通过vue的插件系统将store实例从根组件中“注入”到所有的子组件里
          • 子组件能通过this.$store访问到
      • 每个模块化文件该如何书写：
        • 使用export导出state,getters,mutations,actions
        • 如何解决模块化空间问题（比如：不同模块化文件里出现相同名称）
          • export导出namespaced:true表示该属性将模块限定到命名空间下

三、vuex里的核心概念

  1. State：
    • 干什么：
      • 存储数据，存储后组件可通过state对象直接获取数据，如果使用模块化的话，还得加上模块名访问
    • 展示状态：
      • 在计算属性中返回某个状态
    • mapState辅助函数：
      • 使用场景：
        • 当一个组件需要获取多个状态时
  2. Getters:
    • 用途：
      • 用于获取State对象的数据，对其进行计算返回新的结果而不改变State对象里的原始数据
    • 接收参数：
      • state,getters
    • 访问方式：
      • Getter暴露为store.getters对象
    • mapGetters辅助函数：
      • 将计算属性映射到组件的计算属性中
  3. Mutations:
    • 用途：
      • 用于更新State对象的数据
    • 包含：
      • 一个字符串类型的事件类型(type)
      • 一个回调函数(handler)
        • 是什么：
          • 实际更新State数据的地方
        • 接收参数：
          • state
        • 如何唤醒mutation处理函数：
          • 第一种方式：store.commit('回调函数名',提交载荷)
          • 第二种方式：store.commit(提交载荷)
            • 此方式里的提交载荷要有type="回调函数名"字段
        • 提交载荷：
          • 建议写为对象形式
            • 这样就能写入多个字段，而且会更易读
        • mutation必须是同步函数：
          • 每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照，而mutataion如果是异步，devtools无法捕获到后一状态的快照，因为不知道回调什么时候执行
      • mapMutations辅助函数：
        • 将组件中的methods映射为store.commit调用
  4. Action:
    • 用途：
      • 提交mutation
    • 接收传参：
      • 与store实例具有相同方法与属性的context对象
    • 如何触发action：
      • store.dispatch()
    • 如何提交mutation：
      • context.commit()
    • 如何在组件里使用action来触发状态管理库的更新
      • 第一种方式：dispatch()
        • store.dispatch:
          • 能处理被触发的action的处理函数返回的Promise,并且store.dispatch仍旧返回 Promise
      • 第二种方式：mapAction()将组件的methods映射为store.dispatch调用
    • 使用好处：
      • 不同于不能使用异步的mutation，action可以使用异步
avatar
文章
阅读
粉丝