是用computed获取vuex数据后，修改数据页面不响应的问题

最新推荐文章于 2024-08-03 15:18:43 发布

wh20141212

最新推荐文章于 2024-08-03 15:18:43 发布

阅读量600

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/wh20141212/article/details/138070442

版权

文章讨论了在Vue.js中，使用computed计算属性获取mapGetters数据时遇到的缓存问题。当methods中更新数据但页面未响应时，原因是computed依赖的属性未变。解决方法是将computed的值重新赋值给data，确保数据实时响应。

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

问题描述：代码里使用computed获取mapGetters的数据后，直接在页面使用，在methods中更新数据后，控制台打印数据已经更改，但是页面上的数据没有同步更改和响应。

分析：

1.computed是计算属性，所有相关于计算的方法可以放在里面，并且computed在页面初始加载的时候会调用一次，存在缓存，再次更新需要computed里面依赖的属性发生变化才会再次执行
2.methods是方法，方法是只要调用此方法，就会执行当前函数，无论数据是否发生改变

到这里就很清楚原因了，当你更改当前computed获取的值的时候，并没有更改它所依赖的属性，所以不会被重新执行，相当于compued里面获取的值还是原始值，页面并不会响应。

**解决方案：**将computed获取的值重新赋值给data()里面的值，因为data的值是实时响应的。
核心代码

代码实现：

export default {
	data() {
	    return {
	      defaultOpeneds: [],
	      subMenuList: [],
	      baseMenu: {},
	      menuList:[],
	    }
	  },
	  computed: {
	    ...mapGetters([
	      'permission_routes',
	      'sidebar',
	      'userInfo'
	    ]),
	    ...mapState({
	      slideClass: state => state.settings.slideClass,
	      messageCountShow: state => state.user.messageCount
	    }),
	    userMenuList(){
	      let list =  this.$store.getters.menuList
	      list.forEach(element => {
	        if (element) {
	          element.open = true;
	        } 
	      });
	      return list
	    },
	    classObj() {
	      return {
	        [this.slideClass]: true,
	        'has-logo': this.showLogo
	      }
	    },
	    activeMenu() {
	      const route = this.$route
	      const { meta, path } = route
	      return path
	    },
	    showLogo() {
	      return this.$store.state.settings.sidebarLogo
	    },
	  },
	  created() {},
	  mounted() {
	    this.setDefaultOpeneds()
      },
      setDefaultOpeneds() {
	      this.menuList = JSON.parse(JSON.stringify(this.userMenuList));
	      const currPath = this.$route.path
	      console.log("this.menuList",this.menuList);
    },
}