什么是vuex以及它的思想

Vuex是专为Vue.js设计的状态管理库,采用集中式存储管理组件状态,支持time-travel调试等功能。它通过定义和隔离状态管理的概念并遵循特定规则,帮助开发者构建更结构化、易于维护的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是vuex?

                  

         Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。  

Vuex的思想  

我们可以把组件的共享状态抽取出来,以一个全局单例模式管理在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。

 这就是 Vuex 背后的基本思想,借鉴了 Flux (opens new window)Redux (opens new window)和 The Elm Architecture (opens new window)。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

3.vuex的核心

Vuex怎么用

     首先src里创建一个store的文件夹如果创项目的时候有选vuex就不用了

     项目里的index.Js里的配置项

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  • state         获取状态

  • mutations 更改状态
  1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
  2. Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
  3. 这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
  • Actions      异步操作数据
  1. Action 提交的是 mutation,而不是直接变更状态。
  2. Action 可以包含任意异步操作。
  3. Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者

过 context.state 和 context.getters 来获取 state 和 getters。

  1. 当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。
  • modules:
  1. Vuex 允许我们将 store 分割成模块(module)
  2. 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

  • Getters  store 的计算属
  1. Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。
  2. 就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  3. Getter 接受 state 作为其第一个参数  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值