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

在路由组件之间切换时,vuex getter的值不会更新

在路由组件之间切换时,Vuex getter的值不会更新的原因是因为Vuex的getter是基于状态的计算属性,而不是响应式的数据。当路由组件切换时,Vuex的状态仍然保持不变,因此getter的值也不会更新。

要解决这个问题,可以使用Vuex的watch来监听状态的变化,并在状态变化时手动更新getter的值。具体步骤如下:

  1. 在Vuex的store中定义一个getter,用于获取需要监听的状态值。
代码语言:javascript
复制
// store.js
const store = new Vuex.Store({
  state: {
    // 状态值
    count: 0
  },
  getters: {
    // getter
    getCount: state => state.count
  },
  mutations: {
    // 修改状态值的方法
    increment(state) {
      state.count++
    }
  }
})
  1. 在需要监听状态变化的组件中,使用Vuex的watch方法监听状态的变化,并在回调函数中更新getter的值。
代码语言:javascript
复制
// MyComponent.vue
export default {
  computed: {
    // 使用getter获取状态值
    count() {
      return this.$store.getters.getCount
    }
  },
  watch: {
    // 监听状态的变化
    '$store.state.count'(newVal) {
      // 手动更新getter的值
      this.$store._vm.$watch(() => this.$store.getters.getCount, () => {}, { immediate: true })
    }
  }
}

通过以上步骤,当路由组件切换时,Vuex getter的值会自动更新。

推荐的腾讯云相关产品:无

参考链接:

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

相关·内容

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

22、vuex有哪几种属性? 23、vuex的State特性是? 24、vuex的Getter特性是? 25、vuex的Mutation特性是?...2.使用 频繁切换时用v-show,运行时较少改变时用v-if v-if=‘false’ v-if是条件渲染,当false的时候不会渲染 5、Vue的生命周期 beforeCreate(创建前) 在数据观测和初始化事件还未开始...另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。...3.使用vuex数据管理传值。 (5)说说vue的动态组件。 多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。...那么,我们可以使用v-if=”false”作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。 16、怎么定义vue-router的动态路由?怎么获取传过来的值?

2.1K10

2020年Vue面试题汇总

另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们, 否则vue只会替换其内部属性而不会触发过渡效果。...3.使用vuex数据管理传值。 (5)说说vue的动态组件。 多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。...那么,我们可以使用v-if=”false”作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。 vue核心知识——路由 1.怎么定义vue-router的动态路由?...path 参数会显示在路径上,刷新不会被清空 (2)使用Query: 参数会显示在路径上,刷新不会被清空 name 可以使用path路径 vue核心知识——vuex 不用Vuex...三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中 3、vuex的Getter特性是?

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

    在切换时元素及它的数据绑定 / 组件被销毁并重建。 v-show:根据表达式之真假值,切换元素的 display CSS 属性。...而如果是函数的话,每个实例可以维护一份返回对象的独立拷贝,组件实例之间的data属性值不会相互影响。...$nextTick a.使回调函数延迟在DOM更新之后 b.比如说data中有个str,插值表达式在button里,我改变str的值,str在页面上的值发生了改变,但是打印dom元素依然是 以前的值...在 `/users/1` 和 `/users/2` 之间跳转的时候, // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。...b.vuex有state,getter,mutation,action,module等5种属性。 c.state:存放数据,是响应式的,若是store中的数据发生改变,依赖这个数据的组件也会更新。

    36320

    2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」

    3.3.多个组件之间如何拆分各自的state,每块小的组件有自己的状态,它们之间还有一些公共的状态需要维护,如何思考这块 3.4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex...这是因为在Vue实例创建时,新属性并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局 api $set(): this....而在Vue中,我们更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。 所以组件的数据不能写成对象的形式,而是要写成函数的形式。...1.23.批量异步更新策略 Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。...返回新的状态,通过 Getter暴露给 view层的组件或者页面,页面监测到状态改变于是更新页面。

    8.7K30

    对于常见VUE 问题的理解

    计算属性在计算的过程中首先会获取的计算属性当前的值和上次计算的值作比较,只有在值发生改变时才会触发视图的重新渲染,实现计算属性的缓存。...如果使用index作为Key的情况下,当组件重新排序时,本可以完全复用的组件由于Key值没有发生改变而值变了需要触发更耗费性能的更新过程;而且在删除节点的时候由于key值原因会删除错误的节点。...组件在销毁之前的beforeDestory的生命周期中会清除一些组件之间的关系,关闭watcher等逻辑,然后进入deatory。...getter相当于VUEX中的计算属性,当state中的状态发生变更时,getter也会自动重新进行计算。mutation是改变store中的状态的唯一方法。...this.router.push本质上调用了内部的history。push的方法,计算出带hash值的新路径,执行transitonTo切换路由。

    63120

    【Vuejs】778- 超全 Vuejs 知识点(基础到进阶)

    订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器...如果应用够简单,最好不要使用 Vuex,一个简单的 store 模式即可 需要构建一个中大型单页应用时,使用Vuex能更好地在组件外部管理状态 Vuex和单纯的全局对象有什么区别?...如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。 新增:vuex的action有返回值吗?返回的是什么?...Vuex attrs、listeners Provide、inject 说一下v-if和v-show的区别 当条件不成立时,v-if不会渲染DOM元素,v-show操作的是样式(display),切换当前...方法进行响应式处理( defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

    3.3K51

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

    销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在 组件之间的传值?...vue-router 模块的 router-link 组件。 嵌套路由怎么定义? 在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?...-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。...它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性 vuex 的 getter 特性是什么 getter 可以对 state 进行计算操作...,它就是 store 的计算属性 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用 如果一个状态只在一个组件内使用,是可以不用 getters vuex 的 mutation

    1.5K20

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

    有两种模式: hash 模式 history 模式 vuex 网站:http://vuex.vuejs.org 在vue开发实战中,多个组件共享数据时,单向数据流的简洁性很容易被破坏。...当网站足够大时,一个状态树下,根的部分字段繁多,解决这个问题就要模块化 vuex,官网提供了模块化方案,允许我们在初始化 vuex 的时候配置 modules。...Vuex和简单的全局对象是不同的。当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会更新。并且改变store中状态的唯一途径就是提交commit mutations。...使用异步组件(动态组件) app bundle 文件过大,可以尝试通过组件懒加载优化。 动态组件主页面加载是不会加载,等到触发条件时才加载该组件,并且加载一次后就有缓存。...如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。

    2.1K40

    19 道高频 vue 面试题解答(下)

    v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。...computed:computed是计算属性,也就是计算值,它更多用于计算值的场景computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取...computed的值时才会重新调用对应的getter来计算computed适用于计算比较消耗性能的计算场景watch:更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值...vuex用于组件之间的传值。localstorage是本地存储,是将数据存储到浏览器的方法,一般是在跨页面传递数据时使用 。...Vuex能做到数据的响应式,localstorage不能(3)永久性刷新页面时vuex存储的值会丢失,localstorage不会。

    1.9K00

    Vue 面试题汇总

    销毁前/后 在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在 vuex 面试题 1、有哪几种属性 有 5 种...(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性 3、 vuex 的 getter 特性是什么 (1) getter 可以对 state...更新前/后:当data变化时,会触发beforeUpdate和updated方法 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom...4 Vue组件间的参数传递 父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据; 子组件传给父组件: $emit 方法传递参数 非父子组件间的数据传递,兄弟组件传值 eventBus...组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他 20 Vue computed 实现 建立与其他属性(如:data、 Store)的联系; 属性改变后,通知计算属性重新计算

    3K30

    VUE面试题

    $emit 调用父组件的事件,父组件向子组件传递一个信息,或者说子组件向父组件触发一个事件 组件之间没有关系或层级较深:使用自定义事件 ,event是vue实例,vue本身就具有自定义事件的能力。...data 属性 getter,setter 执行 render 函数,生成 vnode, patch(elem, vnode) 更新过程: 修改 data,触发 setter (此前在 getter 中...答案:父组件通过 slot 获取子组件中的的值:子组件中通过自定义属性绑定数据,父组件通过 template的 v-slot 属性来接收数据 18、vuex 中 action 和 mutation有何区别...在vue 项目中先安装 vuex 利用vue 的插件机制,使用 vue.use(vuex)时,会调用 vuex 的install方法,安装 vuex applyMixin 方法使用 vue 混入机制,vue...方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性 $store vuex 的state 和 getter 是如何映射到各个组件实例中响应式更新状态的?

    1.5K30

    VUE面试题

    $emit 调用父组件的事件,父组件向子组件传递一个信息,或者说子组件向父组件触发一个事件 组件之间没有关系或层级较深:使用自定义事件 ,event是vue实例,vue本身就具有自定义事件的能力。...data 属性 getter,setter 执行 render 函数,生成 vnode, patch(elem, vnode) 更新过程: 修改 data,触发 setter (此前在 getter 中...答案:父组件通过 slot 获取子组件中的的值:子组件中通过自定义属性绑定数据,父组件通过 template的 v-slot 属性来接收数据 18、vuex 中 action 和 mutation有何区别...在vue 项目中先安装 vuex 利用vue 的插件机制,使用 vue.use(vuex)时,会调用 vuex 的install方法,安装 vuex applyMixin 方法使用 vue 混入机制,vue...方法实现了 store 注入 vue 组件实例,并注册了 vuex store 的引用属性 $store vuex 的state 和 getter 是如何映射到各个组件实例中响应式更新状态的?

    1.1K20

    前端面试题汇总-Vue篇

    无法利用路由定位页面; 除此之外,在Vue中,还可以是用keep-alive来缓存页面,当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行...当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新;如必须修改可以在自定义指令中使用keydown事件,在vue组件中使用 change事件,回调中修改vue数据。 1. ...用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数。 43. ...父组件向子组件传值 props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定,子组件的数据会随着父组件不断更新; props 可以显示的定义一个或一个以上的数据,对于接收的数据...Vuex能做到数据的响应式,localstorage不能; 存储时效: 刷新页面时vuex存储的值会丢失,localstorage不会。

    1.6K10

    前端一面经典vue面试题(持续更新中)

    :getter 可以对 state 进行计算操作,它就是 store 的计算属性虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用,是可以不用 gettersaction...(2)路由传值通过 react-router 的 Link 组件的 prop —— to 可以实现路由间传递参数的效果。...在这里需要用到 state 参数,在 B 组件中通过 history.location.state 就可以拿到 state 值,保存它。返回 A 组件时再次携带 state 达到路由状态保持的效果。...组件不会被卸载:(1)单页面渲染要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。...v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    91830

    Vue前端面试题

    hash满足以下几个特性,才使得其可以实现前端路由: url中hash值的变化并不会重新加载页面,因为hash是用来指导浏览器行为的,对服务端是无用的,所以不会包括在http请求中。...这两个api,加上state改变触发的popstate事件,提供了单页应该的另一种路由方式。 当我们在历史记录中切换时就会触发 popstate 事件,可以在事件中还原当前state对应的UI。...在main.js引入store,注入。 新建了一个目录store.js,….. export 。 场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车 vuex有哪几种属性?...vuex数据流动过程 1、vuex是什么 公共状态管理 解决多个非父子组件传值问题。...例如,当你设置vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。

    70740

    面试中会被问及到的vue知识

    使用了v-if的时候,如果值为false,那么页面将不会有这个html标签生成。...此过程中进行ajax交互 beforeUpdate (更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。...setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化 compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数...beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 this beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用...组件之间的传值通信 组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯 1. 父组件给子组件传值 使用props,父组件可以使用props向子组件传递数据。

    2.4K30

    公司要求会使用框架vue,面试题会被问及哪些?

    使用了v-if的时候,如果值为false,那么页面将不会有这个html标签生成。...此过程中进行ajax交互 beforeUpdate (更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。...setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化 compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数...beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 this beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用...组件之间的传值通信 组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯 1. 父组件给子组件传值 使用props,父组件可以使用props向子组件传递数据。

    2.4K30

    进阶vue面试题总结

    所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。...当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新;如必须修改可以在自定义指令中使用keydown事件,在vue组件中使用 change事件,回调中修改vue数据;(1)自定义指令基本内容全局定义...o update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变,也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。...每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。如果这样做了,Vue 会在浏览器的控制台中发出警告。...切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show

    93840
    领券