如何监视vuex中state的某个状态的变化

[小月]

于 2019-12-20 17:49:53 发布

阅读量3.1k

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_43379230/article/details/103636493

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue应用中通过计算属性和监视属性来跟踪Vuex状态的变化，特别是针对state中todos列表的变动，当todos更新时，同步到本地存储。

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

监视vuex，state中某个状态的变化

解决问题的思路是通过 vue 的 computed计算属性将state中要监视的数据取出来，然后通过 watch监视属性监视其变化，以实现某些操作
如我们要监视 state中的 todos，当todos发生变化时将它更新到本地存储就可以通过下面的代码来实现

computed: {
    todos() {
        return this.$store.state.todos;
    }
},

 watch: {
    // 监视todoListModule.todos，当发生变化时将todos重新写入本地存储
    todos: {
        deep:true,
        handler(value) {
            window.localStorage.setItem('todos_key', JSON.stringify(value));
        }
    }
}