GARI中文网

一、Vuex是什么？ 介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。 二、我们什么时候应该用到Vuex呢？ a.小应用不建议使用Vuex,因为小项目使用 Vuex 可能会比较繁琐冗余； b.中大型单页应用，因为要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择； 三、对于使用Vuex的理解是什么？ 由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。 但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。 因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。 四、vuex由五部分组成(五种状态/五种属性) state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter 五、安装配置 第一步：npm i vuex --save/-S 第二步： 创建store.js  第三步：挂载使用        Vue.use(vuex) 第四步：const store = new Vuex.Store({...配置项}) 第五步：导出 export default store 第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象 具体如下 安装 创建store.js  把store对象挂载到Vue实例中 六、详解五种状态 1、state 初始化state 状态state用于存储所有组件的数据。 管理数据 在组件获取state的数据：原始用法插值表达式 使用计算属性： 注意： state中的数据是自定义的，但是state属性名是固定的获取数据可以通过 $store.state可以使用计算属性优化模板中获取数据的方式计算属性不可以使用箭头函数（箭头函数本身是没有this的，实际上用的是父级函数中的this） mapState 目标：简化获取store数据的代码 把vuex中的state数据映射到组件的计算属性中。 1.使用：mapState(对象) 2.使用：mapState(数组) 3.如果组件自己有计算属性，state的字段映射成计算属性 2、mutations 基本操作 目标：Vuex规定必须通过mutation修改数据，不可以直接通过store修改状态数据。 为什么要用mutation方式修改数据？Vuex的规定 为什么要有这样的规定？统一管理数据，便于监控数据变化 定义状态修改函数 组件中调用 总结： 先定义（mutations），再出发 this.$store.commit(‘mutation的名称，参数’) mutation的本质就是方法，方法名称自定义，mutation函数内部负责处理的变更操作。 一种操作就是一个mutation，不同的mutation处理不同的场景。 mapMutations 把vuex中的mutations的函数映射到组件的methods中通俗：通过mapMutations函数可以生成methods中函数 总结： mapMutations函数的作用：简化methods的定义原始方式：通过$store.commit方法触发mutation简写方式一：对象写法简写方式二：数组写法 3、action 基本使用 目标：主要用于处理异步的任务 安装axios的包 定义获取数据方法 组件使用： mapActions mapActions辅助函数，把actions中的函数映射组件methods中通俗：通过mapActions函数可以生成methods中函数 总结： 原始方式：this.$store.dispatch(‘queryData’, num)简化方式一：对象简化方式二：数组 4、getters用法 目标：熟悉getters的应用场景和具体使用步骤 先定义getters 再使用getters 1.基本使用 2.简化用法 总结： getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）getters不要修改state中的数据getters类似之前的计算属性（基于state中的数据进行计算） 5、modules 使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。 为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割： 例如：分模块形式管理数据，比如user模块管理用户信息数据，cart模块管理购物车数据，shop模块管理商品信息数据。 home.vue如何使用 获取user模块的`userid` 七、数据持久化 问题：存储在vuex中的状态，刷新页面，会丢失。为了解决刷新页面数据丢失，才有了数据持久化。最简单的做法就是利用插件 vuex-persistedState。 1、安装 备注： -S 是 --save的简写，意为：把插件安装到 dependencies（生产环境依赖）中-D是 --save-dev的简写，意为：把插件安装到 devDependencies（开发环境依赖）中 2、使用 参数： storage:存储方式。（sessionStorage,localStarage） key:定义本地存储中的key 以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 您可能感兴趣的文章:vuex中的5个属性使用方法举例讲解vuex中五大属性和使用说明(包括辅助函数)Vuex中五个属性以及使用方法详解