首页
学习
活动
专区
工具
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、vuexState特性是? 24、vuexGetter特性是? 25、vuexMutation特性是?...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、vuexGetter特性是?

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中数据发生改变,依赖这个数据组件也会更新

    34820

    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切换路由

    62820

    面试中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

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

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

    3.3K51

    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具有缓存性,computedgetter执行后是会缓存,只有它依赖属性改变之后,下一次获取...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.4K30

    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 是真正条件渲染,因为它会确保切换过程中条件块内事件监听器和子组件适当地被销毁和重建;也是惰性:如果在初始渲染条件为假,则什么也不做——直到条件第一次变为真,才会开始渲染条件块。

    91330

    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”更新

    70440

    面试中会被问及到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

    哪些拿住我面试题

    组件与子组件组件通过标签上面定义传组件通过props方法接受数据 子组件向父组件传递数据 子组件通过$emit方法传递参数 五、路由之间跳转 声明式(标签跳转) 编程式( js跳转) 六...当有相同标签名元素切换,需要通过 key 特性设置唯一来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部内容。...二十四、为什么避免 v-if 和 v-for 用在一起 当 Vue 处理指令,v-for 比 v-if 具有更高优先级,通过v-if 移动到容器元素,不会再重复遍历列表中每个。...依赖这相数据组件也会发生更新   (3) 它通过 mapState 把全局 state 和 getters 映射到当前组件 computed 计算属性 3、 vuex getter 特性是什么...  (1) getter 可以对 state 进行计算操作,它就是 store 计算属性   (2) 虽然组件内也可以做计算属性,但是 getters 可以多给件之间复用   (3) 如果一个状态只一个组件内使用

    2.1K30
    领券