首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue:数据不会因为Vuex getter而改变?

Vue是一种流行的前端开发框架,它采用了响应式的数据绑定机制,可以实时更新视图。在Vue中,数据的改变会触发视图的更新,而Vuex是Vue的官方状态管理库,用于管理应用中的共享状态。

在Vuex中,我们可以使用getter来获取状态,并对状态进行一些处理。但是需要注意的是,getter只是对状态的一个计算属性,它不会直接改变状态的值。换句话说,如果我们通过getter获取状态并对其进行修改,不会改变原始状态的值。

这是因为Vuex遵循了Vue的响应式原理。当我们通过getter获取状态时,Vue会将getter和状态建立依赖关系。只有当状态发生变化时,Vue才会重新计算getter的值。因此,如果我们修改getter的返回值,不会影响原始状态的值。

这种设计有助于保持状态的一致性和可追踪性。如果我们希望修改状态,应该直接通过mutation来进行,而不是通过getter。

对于Vue中的数据不会因为Vuex getter而改变的问题,可以通过以下方式解决:

  1. 使用mutation来修改状态:在Vuex中,mutation是唯一允许修改状态的方式。通过定义mutation,我们可以明确地知道状态的修改是通过mutation进行的,从而保证状态的可追踪性和一致性。
  2. 在getter中返回新的对象:如果我们需要在getter中对状态进行处理,并返回一个新的对象,可以确保原始状态的值不会被修改。这样做的好处是可以保持状态的不可变性,避免出现意外的副作用。

综上所述,Vue中的数据不会因为Vuex getter而改变。我们应该通过mutation来修改状态,并在getter中返回新的对象以保持状态的不可变性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue_06】VueX

一、Vuex 概述 1. 什么是 Vuex 1.Vuex 是为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。...4.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新。 ? 2....Vuex 的基本使用 安装 npm install vuex --save 创建 store.js 文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use...Getter Getter 是什么 Getter 用于对 Store 中的数据进行加工处理形成新的数据,它只会包装 Store 中保存的数据,并不会修改 Store 中保存的数据。...当 Store 中的数据发生变化时,Getter 生成的内容也会随之变化 Getter 的使用方式 // 在 store.js 中添加 getter 属性 getters:{ //添加了一个属性

61610

Vuex原来可以这样上手

在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,前端这方面也发展迅速。...vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会觉得这就是Mvc库呢,实则不然,因为他还差一个重要的C(也就是控制器)。...如此理解也是可以的:vue + vuex = 前端mvc框架 flux(单向数据流) actions:一个动作,可以是view创建的,也可以是程序其他逻辑创建的 dispatcher:将业务逻辑与用户界面分离...dispatch可以是view视图中触发,也可以是程序业务逻辑来触发 actions通过commit方法发出一个改变事件 mutations中具体操作state的改变 state的改变通过getter暴露给...view,state改变后会立即通知用getter关联起来的view。

86450

vue3中使用Vuex

Vuex 曾经是Vue.js的官方状态管理库。为什么说是曾经呢,因为Vue.js官方网站的生态系统的官方系统中找不到Vuex的影子了,取而代之的是Pinia。...因此,学习Vuex可以帮助我们更好地理解Vue.js的状态管理机制,提高我们处理Vue.js应用中的状态管理的能力,并且能够更好地适应已有的Vue.js项目。...使用Vuex 在使用Vuex之前,我们需要了解Vuex中的几个核心概念,即:State,Mutation,Action,Getter 和 Module State 在Vuex中,state是应用程序的状态管理模式中定义的数据源...Getter 的特点和作用 Getter 访问时不需要调用,是在模块中对 state 进行一个辅助性的处理。 Getter 不会对 state 数据进行修改,只是对 state 数据进行加工处理。...组件中很少直接使用 state,因为 state 的结构可能会改变,这会导致需要修改组件中的所有使用到这些 state 的地方。而使用 Getter,可以维护一种稳定的接口。

51540

VueVuex 详细讲解

一个应用中,Vuex 用一个 state 对象就包含了全部应用层级的状态,它作为一个“唯一数据源 (SSOT)”存在。也就是说,每个应用将仅仅包含一个 store 实例。...$mount('#app') 一个完整的 store 的 index.js 文件如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex...GetterVuex 中,Getter 的作用类似于 Vue 的计算属性的概念,可以对 state 里面的值进行计算,从而在组件调用的时候,不用每个组件都要重新计算,有点像 Java 里面的公共方法一样...Action Action 类似于 mutation,也是用来改变 state 中的状态值,不同的地方在于: Action 提交的是 mutation,不是直接变更状态。...这是因为默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

1.2K20

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

Flux 以及我们要学习的 Vuex 则是试图通过强制单向数据流来解决这个复杂度。...在 Flux 里,View 从 Store 获取的数据是只读的。 Stores 只能通过 Actions 被更新,这就会影响 Store 本身不是那些只读的数据。...组件和 Vuex store 的交互 前面我们讲完了 Vuex 单元测试所需要的基本知识, Vue 组件需要从 Vuex store 读取状态或者是发送 action 改变 store 状态的时候,...所以我们在测试 action 的时候就可以只关心 action 的触发,至于触发之后对 store 做了什么事情我们就不需要再关心了,因为 Vuex 的单元测试会涵盖相关的代码逻辑。...这是因为我们不想影响到全局的 Vue 构造函数,如果直接使用 Vue.use(Vuex) 会让 Vue 的原型上会增加 $store 属性从而影响到其他的单元测试。

1.6K30

Vue 面试题汇总

组件之间数据状态共享 使用场景:音乐播放、登录状态、购物车 // 新建 store.js import vue from 'vue' import vuex form 'vuex' vue.use(vuex...销毁前/后 在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在 vuex 面试题 1、有哪几种属性 有 5 种...其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data (2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新...action 里,方便复用,并包装成 promise 返回 5、不用 vuex 会带来什么问题 可维护性会下降,你要修改数据,你得维护3个地方 可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的...更新前/后:当data变化时,会触发beforeUpdate和updated方法 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom

3K30

​轻松掌握vuex,让你对状态管理有一个更深的理解

Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。 [vuex.png] 什么情况下我应该使用 Vuex?...vuex核心概念 State 单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”存在。...就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...', done: false } 注意,getter 在通过方法访问时,每次都会去进行调用,不会缓存结果。...然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的

3.3K40

Vue常见面试题汇总

销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。...其中 state 就是数据源存放地,对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新它通过...promise 返回 不用 vuex 会带来什么问题 可维护性会下降,你要修改数据,你得维护 3 个地方 可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的 增加耦合,大量的上传派发,会让耦合性大大的增加...,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背 vuex 原理 vuex 仅仅是作为 vue 的一个插件存在,不像 Redux,MobX 等库可以应用于所有框架...,vuex 只能使用在 vue 上,很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统,vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计

1.3K10

前端知识点总结vue篇(下)

Vue的优点与缺点 优点: 组件化、响应式、单页面路由(SPA)、轻量级、渐进式(随意component是否使用、vuex是否使用) 缺点: 不利于SEO、不支持IE8以下(因为defineproperty...当页面加载完成之后,利用路由实现HTML内容的变换,UI与用户 的交互,不会因为用户的操作进行页面的重新加载或跳转 优点: 用户体验感好,避免了不必要的跳转和重复渲染 SPA对服务器压力小 前后端职责分离...Vue中为什么data是一个函数 因为组件是用来复用的,js里对象是引用关系,如果组件中data是一个对象,那么作用域没有隔离,子组件中的data属性值 会相互影响。...兄弟组件通信 12.computed和watch的区别 a.computed 计算属性,依赖其他属性值有,有缓存;可以用getter获取数据,也可以用setter改变数据; b.watch 监听数据数据变化再进行后续操作...b.vuex有state,getter,mutation,action,module等5种属性。 c.state:存放数据,是响应式的,若是store中的数据发生改变,依赖这个数据的组件也会更新。

33220

vuex的五大核心_vue如何实现跨域

State Vuex使用单一状态树,也就是说,用一个对象包含了所有应用层级的状态,作为唯一数据存在。没一个Vuex应用的核心就是store,store可理解为保存应用程序状态的容器。...当Vue组件从store中检索状态的时候,如果store中的状态发生变化,那么组件也会相应地得到高效更新。   (2)不能直接改变store中的状态。...在严格模式下,如果store中的状态改变不是有mutation函数引起的,则会抛出错误,而且如果直接修改store中的状态,Vue的调试工具也无法跟踪状态的改变。...与计算属性一样,getter的返回值会根据它的依赖项被缓存起来,且只有在它的依赖项发生改变时才会重新计算。...因为当mutation被提交的时候,回调函数还没有被调用,devtool也无法知道回调函数什么时候真正被调用。实际上,任何在回调函数中执行的状态的改变都是不可追踪的。

1.5K10

了解Vuex状态管理模式的理解强化指南

它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。...vuex也不是随便乱用的,小型简单的应用就不那么合适了,因为用了Vuex是繁琐多余的,更适合使用简单的store模式;对于vuex更加适用于中大型单页应用:多个视图使用于同一状态,不同视图需要变更同一状态...$store.state来获取我们定义的数据: import Vue from 'vue' // 引入vue import Vuex from 'vuex' // 引入vuex // 使用vuex Vue.use...$store.state.count}} Getters相当于vue中的computed计算属性,getter的返回值根据它的依赖被缓存起来,且只有当它的依赖值发生改变时才会重新计算。...file 核心概念:State,Getter,Action,Module Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响应式的。 2.不能直接改变 store 中的状态。

1.4K20

面试中Vue被问的最多的题目是哪些?

销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在 组件之间的传值?...其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新...里,方便复用,并包装成 promise 返回 不用 vuex 会带来什么问题 可维护性会下降,你要修改数据,你得维护 3 个地方 可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的 增加耦合...,大量的上传派发,会让耦合性大大的增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背 vuex 原理 vuex 仅仅是作为 vue 的一个插件存在,不像 Redux...,MobX 等库可以应用于所有框架,vuex 只能使用在 vue 上,很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统, vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了

1.5K20

了解Vuex状态管理模式的理解强化指南

它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。...vuex也不是随便乱用的,小型简单的应用就不那么合适了,因为用了Vuex是繁琐多余的,更适合使用简单的store模式;对于vuex更加适用于中大型单页应用:多个视图使用于同一状态,不同视图需要变更同一状态...$store.state来获取我们定义的数据: import Vue from 'vue' // 引入vue import Vuex from 'vuex' // 引入vuex // 使用vuex Vue.use...$store.state.count}} Getters相当于vue中的computed计算属性,getter的返回值根据它的依赖被缓存起来,且只有当它的依赖值发生改变时才会重新计算。...核心概念:State,Getter,Action,Module Vuex 和单纯的全局对象有以下两点不同: 1.Vuex 的状态存储是响应式的。 2.不能直接改变 store 中的状态。

1.2K10

VUE面试题

beforeUpdate: 这一阶段,vue遵循数据驱动DOM 的原则,beforeUpdate 函数在数据更新后没有立即更新数据,但是DOM 数据改变,这是双向数据绑定的作用; updated:这一阶段...是异步渲染;data改变之后,DOM 不会立刻渲染;$nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点。...,不必再次执行函数; methods 每当触发重新渲染时,调用方法总会再次执行函数 computed 和 watch的区别:computed 默认只要 getter,不过需要时也可以提供 setter...方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性 $store vuex 的state 和 getter 是如何映射到各个组件实例中响应式更新状态的?...vuex 的state 状态是响应式,是借助 vue的data是响应式,将 state存入vue实例组件的data中;vuex 的getters则是借助 vue的计算属性 computed 实现数据实时监听

1.4K30

Vue 全家桶、原理及优化简议

Vuex 的四个核心概念是: The state tree:Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个唯一数据源(SSOT)存在。...Vuex和简单的全局对象是不同的。当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会更新。并且改变store中状态的唯一途径就是提交commit mutations。...主要通过事件监听来改变数据,比如input控件可以监听input事件,一旦事件触发,调用JS改变data。 ? 模型层(model)只是普通 JavaScript 对象,修改它,DOM本是不能更新的。...vue通过getter收集watcher集合。因为vue充许在运行时添加代码,所以该收集行为不能仅限制于模板“编译”之前。...,那边vue内部不会使用defineproperty去监听数据内部的变化,只有本身变化时才会触发,在大量数据的情况下,vue内部不在去监听数据的变化会提高性能。

2K40

Vuex

# Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 # Vuex使用过程演示 以vue-cli3新创建出来的项目为例,演示Vuex的使用过程。...,并写入: // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new...就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...', done: false } 注意,getter 在通过方法访问时,每次都会去进行调用,不会缓存结果。...然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的

1.1K10

2021vue经典面试题_vue面试题大全

22、vuex有哪几种属性? 23、vuex的State特性是? 24、vuexGetter特性是? 25、vuex的Mutation特性是?...2.使用 频繁切换时用v-show,运行时较少改变时用v-if v-if=‘false’ v-if是条件渲染,当false的时候不会渲染 5、Vue的生命周期 beforeCreate(创建前) 在数据观测和初始化事件还未开始...methods是一个方法,它可以接受参数,computed不能,computed是可以缓存的,methods不会 3、computed 是否能依赖其它组件的数据?...因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离, new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。...另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性不会触发过渡效果。

2.1K10

VUE面试题

beforeUpdate: 这一阶段,vue遵循数据驱动DOM 的原则,beforeUpdate 函数在数据更新后没有立即更新数据,但是DOM 数据改变,这是双向数据绑定的作用; updated:这一阶段...是异步渲染;data改变之后,DOM 不会立刻渲染;$nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点。...,不必再次执行函数; methods 每当触发重新渲染时,调用方法总会再次执行函数 computed 和 watch的区别:computed 默认只要 getter,不过需要时也可以提供 setter...方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性 $store vuex 的state 和 getter 是如何映射到各个组件实例中响应式更新状态的?...vuex 的state 状态是响应式,是借助 vue的data是响应式,将 state存入vue实例组件的data中;vuex 的getters则是借助 vue的计算属性 computed 实现数据实时监听

1.1K20
领券