vuex

时间:2024-10-21 11:46:00编辑:阿星

vuex是什么?

Vuex是一个专门为vue.js应用程序开发的状态管理工具 状态在这里就是数据的意思 使用场景:(1)登录信息、(2)购物车、(3)复杂的组件通信 vuex五大核心 1 state 状态的意思 ,是存放数据的地方 放在state中的数据在任何地方都可以使用 使用的方法:this.$store.state.xxx 2 mutations 是修改状态state地方,只有mutations有权利修改state mutations 中方法的第一个参数永远都是state 我们如果要修改state的时候,就写一个方法来调用mutations 调用的方法是 this.$store.commit("方法", 参数) 3 getters 相当于计算属性 getters 中方法的第一个参数永远都是state 使用: this.$store.getters.xxx getters 和计算属性的区别,就是getters在任何一个组件都可以使用 4 actions 存放异步请求 5 modules 模块管理 vuex的存储并不是持久化的,一刷新页面,数据就没了 1.如何安装 vuex-persist cnpm i vuex-persist --save yarn add vuex-persist --save 2.如何使用??? 在store/index.js 引入 import VuexPersistence from 'vuex-persist' 3.使用

什么是 Vuex ?它是做什么的

Vuex 是Vue的一种状态管理模式,专门为Vue设计的,集中式组件管理状态,我们通常不会这么做,通常使用的是子父传值,父子传值,兄弟传值,父直接用子,子直接用父,当组件之间的传值满足不了需求,来自不同视图需要变更同一个状态,会使用状态管理器,通俗的来讲就是你觉得你现有的功能满足不了项目需求,需要使用那么就使用,如果不需要使用那么就不使用,使用它并没有绝对的条件。

Vuex 使用 单一状态树 ——是的,用一个对象就包含了全部的应用层级状态。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

store 中的状态的唯一提交方法 

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成 模块(module) 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:


上一篇:未来的你

下一篇:没有了