Vue学习记录（七）--- Vuex

wiedereshen
171 阅读4分钟

vuex概述

  • vuex 是一个插件，可以帮助我们管理 vue 项目中的通用的数据（多组件共享的数据）
  • 应用场景
    • 某个状态在很多个组件中来使用（个人信息）
    • 多个组件共同维护一份数据（购物车）
  • 优势：
    • 共同维护一份数据，数据集中化管理
    • 响应式变化
    • 操作简洁（vuex提供了一些辅助函数）
  • a966e7fcb82800f5364c11560748a9a8.png

构建 vuex 多组件数据共享环境

  • 基于脚手架创建项目，构建 vuex 多组件数据共享环境
  • 55323f1285df4398962fa110ecd30b3c.png
  • fc502f45f4418e6c8609ff97afa48181.png

vuex - 创建一个空仓库

  • 安装 vuex 插件，初始化一个空仓库
  • 步骤
    1. 安装 vuex
      • 注意‘233、344’：
      • 在 vue2 中，vuerouter 及 vuex 的适配版本均为 3.x
      • 在 vue3 中，vuerouter 及 vuex 的适配版本均为 4.x
      • yarn add vuex@3
    2. 新建 vuex 模块文件
      • 新建 store/index.js 专门存放 vuex
    3. 创建仓库
        Vue.use(Vuex)
    // 新建仓库
    new Vuex.Store()
    1. main.js 导入挂载
      • 在 main.js 中导入挂载到 Vue实例上

vuex - state状态 (状态 == 数据)

  • 明确如何给仓库提供数据、如何使用仓库的数据
  • 提供数据：
    • state 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 state 中储存。在state对象中可以添加我们要共享的数据
    • 82153ec1098225f631dcf7181257c0bc.png
  • 使用数据
    • 通过 store 直接访问
    • $store.state.count
    • 1c232c1e3bde76d93ba1de5ee9371382.png
  • 通过调用辅助函数（简化）
    • 辅助函数 mapState ，帮助我们将 store 中的数据 自动 映射到组件的计算属性中
    • d47b9481ebb673485d598b7648f194e3.png
    • 334066901088d7adbe03926280527ecb.png

vuex - mutations

  • 明确 vuex 同样遵循单项数据流，组件中不能直接修改仓库的数据
    • 通过 strict: true 可以开启严格模式
    • 9ec7f3b8766852714d21aab7f603ef99.png
    • 61f338274e70e860ebd29f52aa9765eb.png
  • 掌握 mutations 的操作流程，修改 state 数据。（state数据的修改只能通过 mutations）
  1. 定义 mutations 对象，对象中存放着修改 state 的方法
    • 每一个修改 state 的方法就可以看作一个小的 mutation
    • 881bbe29d14db5639bd603953c002f61.png
  2. 组件中提交调用 mutations
    • this.$store.commit('addCount')
    • c415bb398e471c483574bf2ce9114dd8.png

mutations 传参

  • 掌握 mutations 传参语法
  • this.$store.commit('xxx', 参数)
  1. 提供mutation函数（带参数 - 提交载荷 payload）
    • c9482e8cd96b4b59befde7b0895caf53.png
  2. 页面中调用 mutation
    • 626033bbdcd4f3274273e7af25e6ca5b.png
  • 注意：
    • mutation 只能传递和接收一个参数，如果需要多个参数，可以将其包装成一个对象。
    • 5ac6af1de6a39f4ccec7aa69aa668312.png
    • 在 store/index.js 中
    • 77147e6983c9343a542ef9ca058fe65f.png

mutations 传参练习

  • 将输入框和 state 中的数据双向绑定，实现实时输入，实时更新。
  • 实现步骤：
    1. 输入框内容渲染 （:value）
    2. 监听输入，获取内容 （@input）
    3. 封装 mutation 处理函数 （mutation 传参）
    4. 调用传参（commit）
    • 172c96a295615556596071467eed5894.png
    • ba82ea2a2263e3bc6a2732e7883cf8a1.png

辅助函数 - mapMutations

  • 掌握辅助函数 mapMutations 映射方法
  • mapMutations 和 mapState 很像，它是把 mutations 中的方法提取了出来，映射到组件methods中
  • 45464893eabd15e99b5dd29135035870.png
  • f51628639fad8ac4e5f490162f151181.png
  • 3788f35da0b871be7fe99d97abc7defb.png

vuex - actions

  • 明确 actions 的基本语法，处理异步操作
  • 说明：通过 mutation 操作的数据必须是同步的
  • 注意：actions 中不能直接修改 state，想要修改 state 还是需要调用 mutation
  • 需求：1s 后，修改 state 的 count 为666
  • e301652294c9d0cedbfe6ad4144a55e5.png
  • 步骤：
    1. 提供 action 方法
      • 71b1155e7e6d82ba72f9be261e6eb270.png
    2. 页面中 dispatch 调用
      • fbb389f838d99d16e5e2b4792f6085b7.png
  • 在 store/index.js 中添加 actions
  • 01768182210d88638d09b10767578d30.png
  • 在 Son1.vue 通过 this.$store.dispatch('changeCountAction', 666) 调用 action 方法
  • 57ec7a83e557fa3895750c75b93dedba.png

辅助函数 - mapActions

  • 掌握 mapActions 的语法，映射方法
  • mapActions 是把位于 actions 中的方法提取出来，映射到 methods 中
  • edbb31a8fdb113b42862a46d926fd18b.png
  • dada1a621abf624898556079da61d6b3.png

vuex - getters

  • 核心概念 getters 的基本语法(类似于计算属性)
  • 除了 state 之外，有时我们还需要从 state 中派生出一些状态，这些状态是依赖于 state 的，此时就需要用到getters
  • 场景：state 中定义了 list，为 1~10 的数组，需要在组件中展示所有大于 5 的数据
    • 6b2f6b9ba4edcf49847b9bc9c136f401.png
  • 使用步骤
    1. 在 store/index.js 中定义 getters
    2. 在组件中访问 getters
      1. 通过 store 访问 getters $store.geters.filterList
      2. 通过辅助函数 mapGetters 映射
      • 1caffcb8ecbac1ebe37e868b4a74a4bc.png
  • 具体使用：
    • 在 getters 中的函数要注意：
      • 形参是第一个参数，为 state
      • 必须有返回值，即 getters 的值
    • 在 store/index.js 中添加 getters
      • c150679ad086ae07b93ea056d5c16007.png
    • 通过 $store.getters.filterList 访问
      • 3aef90676d01cca4a4510647e8b04215.png
    • 通过 mapGetters 辅助函数映射
      • 71ce8f2662608bceb31db8622048ed5c.png

vuex - module

  • module 模块的创建
  • 由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。
  • 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。（vuex 会变的难以维护）
  • ce1924b6feeeb10be07176341044c6aa.png
  • adf25d72bb11bae35f102d3ee8d52960.png
  • 3a4b6874ef69758df6160f8e43408441.png

module - 子模块中 state 的访问

  • 模块中 state 的访问
  • 访问方式
    1. 直接通过模块名访问 $store.state.模块名.xxx
      • e9188d3a566809841036dfb9accf819f.png
    2. 通过 mapState 映射
      • 根级别的映射：mapState(['xxx'])
      • 4e903ee4685182f907b9a80172515fb8.png
      • 子模块级别的映射 mapState('模块名', ['xxx']) - 需要开启命名空间
      • dd3a20a0d4b20785dc855d010d7a6097.png
      • b292197465d711417e4d6dc1039f685f.png

module - getters

  • 模块中 getters 的访问语法
  • df47999df7ef5bf1ea13ac723a62c2c9.png
  1. 直接通过模块名访问 $store.gettersp['模块名/xxx']
  • 0c91d9ca9ffcadbbc37a132135a71499.png
  1. 通过 mapGetters 映射
  • 根级别映射 mapGetters(['xxx'])
  • 子模块的映射 mapGetters('模块名', ['xxx']) - 同样需要开启命名空间
  • 0cfddf8e46402f32d452cf3c574534ea.png

module - mutation

  • 模块中 mutation 的调用语法
  • 注意：
    • 默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块
  • 调用子模块中的 mutation：
    1. 直接通过 store 调用 $store.commit('模块名/xxx', 额外参数)
      • ae8b8198f591607545f4c298ad46200f.png
      • 2cef9de1d4a3f1d5d900d0edb8835753.png
    2. 通过 mapMutations 映射
      • 根级别的映射
        • mapMutations(['xxx'])
      • 子模块的映射 mapMutations('模块名', ['xxx'])
        • 76a5432580589be013dec8e8e8ec5a9e.png

mudule - actions

  • 模块中 action 的调用语法（与 mutations 非常相似）
  • 注意：
  • 需要开启命名空间，actions 才会被挂载到子模块
  • 调用子模块中的 action:
  1. 直接通过 store 调用：$store.dispatch('模块名/xxx', 额外参数)
  • f71a8a4523ce3531a644f58ee94d0a39.png
  • 5b481c47833cb3fc748d8b15e793f074.png
  1. 通过 mapActions 映射
  • 根级别映射：mapActions(['xxx'])
  • 子模块映射：mapActions('模块名', ['xxx'])
  • 514acd29452cefc38d6b7535125bf6a7.png

综合案例 - 购物车

购物车 - 功能分析及创建项目

  • bb0103246f73dabc53ce86668466ae1f.png
    • 功能模块分析：
    1. 发送请求动态渲染购物车，vuex 存储数据
    2. 数字框控件，修改数据
    3. 动态计算，总价和总数量
  • 脚手架新建项目（勾选 vuex ）
  • 将原本的 src 内容清空，替换为素材

购物车 - 构建模块及准备数据

  • 构建模块
    1. 新建 store/modules/cart.js
    • 61fdd76830f02cfd5ce1810c15e84a66.png
    1. 挂载到 vuex 仓库上 store/index.js
    • d4842c9ab6ee6e568f4c24b7e66cabca.png
  • 准备数据
    • 基于 json-server 工具，准备后端接口服务
  • 步骤
    1. 安装全局工具 json-server （仅需安装一次）官网 'www.npmjs.com/package/jso…'
    2. 在代码根目录创建一个 db 目录
    3. 将准备好的json文件 Index.json 移入目录
    4. 进入 db 目录，启动后端接口服务 - json-server --watch index.json f87187df8d2e4662110ba78d095647ec.png-
    5. 访问接口测试：http://localhost:3000/cart
    • e2059c1fffcbc262afa73c767772bf41.png

购物车 - 获取数据并存入 vuex，映射渲染

  • 步骤
    1. 安装 axios
      • npm install axios
    2. 准备 actions 和 mutations
      • b011f3b19859a15c3477115c82d3a331.png
    3. 调用 action 获取数据
    4. 动态渲染（mapState 映射）
      • a6e5fe966a4c6b3856cfed1ff7372fae.png
      • b97f59951513150021a0baddb2f6f5f6.png

b97f59951513150021a0baddb2f6f5f6.png

购物车 - 修改数量

  • 修改数量功能
  • 310eecc9d643b99607deb272e704d1bf.png
  • 步骤：
    1. 添加点击事件
    • cccc6ae40b20d8dc291fa2016d08efe4.png
    1. 提供 action 函数和 mutation 函数
    • 852109918ba6c068fb2c44a84afa2d96.png

购物车 - 底部统计

  • 步骤：
    1. 提供 getters
      • 350d3b41c1926ee9abbbf444d9321272.png
    2. 使用辅助函数 mapGetters 映射到组件中
      • c0c89a3e013080c3dcef11df72175182.png
avatar
文章
阅读
粉丝