随笔分类 - Vue / Vuex
摘要：模块化+命名空间 Vuex中的高级写法：Vuex的模块化编码 把不同分类【业务分类不同，比如订单管理类的和商品管理类的】的mutation放在不同位置 模块化编码的最终目标：对actions、mutations、state、getters中的内容进行分类整理 1. Vuex模块化编码的步骤 根据业务
阅读全文
摘要：四个map方法的使用 这四个map方法的作用是帮我们生成代码。 计算属性优化了模板中的语法，使得插值语法变得简洁，但仍然没有解决代码冗余的问题，只是将插值语法中的冗余转移到了计算属性中 为什么我们需要生成代码？ 模板中获取state中的数据时，代码冗余很高，存在代码优化的可能。 可以通过计算属性简化
阅读全文
摘要：getters配置项 概念：getters配置项并不是必须要使用的，当state中的数据需要经过加工后再使用时，可以使用getters加工。 应用场景：运算逻辑复杂而且需要复用，用于抽取基于state中数据的公共运算 在store.js中追加getters配置 ...... // 准备getters
阅读全文
摘要：Vuex Devtools 由于Vue和Vuex都是由官方团队开发的，Vue的Devtools和Vuex的Devtools是合二为一的 组件页签、Vuex页签、事件页签 事件页签：观察自定义事件和全局事件总线中的事件 Vuex Devtools仅仅捕获mutations中的动作，actions中的动
阅读全文
摘要：求和案例 // index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const actions = { // 对于不包含业务逻辑也不进行Ajax请求转发的操作可以不经过actions，直接调用mutations中的
阅读全文
摘要：搭建Vuex环境 安装Vuex npm i vuex@3 注：目前使用的是vue 2，所以要安装vuex 3 创建src/vuex/store.js或src/store/index.js，二选一，js文件的内容都是一样的，该文件用于创建Vuex中最为核心的store //引入Vue核心库 impor
阅读全文
摘要：关于Vue和Vuex的版本对应关系 Vue 2 对应 Vuex 3 Vue 3 对应 Vuex 4 注：如果版本不对应，就会报错
阅读全文
摘要：工作原理 vuex原理图 Devtools：vuex官方提供的开发者调试工具 Backend API：后端接口`` vuex原理图-理解 mutations相当于后端里的dao层，直接操作数据【数据库】 actions相当于后端里的Service层，封装业务逻辑，发送接口 如果一个操作没有业务逻辑或
阅读全文
摘要：概述 一、是什么 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 注：Vue和Vuex的关系与React和Redux是一样的 解析 集中式与分布式 状态 <=> 数据 <=> 状
阅读全文
