vuejs中如何监听vuex中state变化做统一处理？

Question

基于vue.js和vuex做了一个todoList小demo，数据统一存储在vuex中。

现在希望list的数据变化实时保存在localstorage中，这样页面刷新时，数据能还原。本来以为可以像vuejs中那样通过watch统一处理下

watch:{
        list:{
            handler(val){
                localStorage.setItem('todo-list',JSON.stringify(val));
            },
            deep:true
        }
    },

结果发现不行，只好在每个mutation中执行：

localStorage.setItem('todo-list',JSON.stringify(state.list));//这句代码严重重复

代码如下：

这样感觉好笨重，太麻烦，本质需求就是“监听”list的变化，做一个统一处理而已，怎么弄呢？

做了一个在线demo，大神帮忙看下需求：
https://codepen.io/quiettroja...

Answer 1

//利用计算属性
  computed: {
    changeMemberTab() {
      return this.$store.state.changeMemberTab;
    }
  },
  //监听执行
  watch: {
    changeMemberTab(val) {
      document
        .getElementById("memberTabHeader")
        .getElementsByTagName("li")[this.$store.state.changeMemberTab].click();
    }
  },

Answer 2

有一个建议：

其实你自己封装一下 utils.js 然后把 setLocalStorage 封装起来，但是还是在 mutations 直接用，而且设置的时候不要在组件里面，还是在统一的 store

还有 mutations 名字建议都大写

Answer 3

可以看看vuex的getter，相当于store的计算属性。不过我感觉你这行重复代码不太能省下来

Answer 4

computed: {
    watchTodo() {
      return this.$store.getters.todo.length;
    }
  },
  watch: {
    watchTodo: {
      handler(newVal, oldVal) {
        console.log("changed");
        storage.set("todo", this.$store.state.todoThings);
      },
      deep: true
    }
  },

可以监听操作，storage是封装的

Answer 5

可以监听的，前提是计算属性里要用到

import {mapState} from 'vuex'

computed: {
    ...mapState(['list'])
},
watch: {
    list: {
        handler: newVal=>{
            localStorage.setItem('todo-list',JSON.stringify(newVal))
        },
        deep: true
    }
}