vue-vuex的namespaced-使用watch监听state或getter(懒人福利)

使用 module,不使用 namespaced

情况:

1. 可能存在重复的action或者mutation
2. vue组件使用watch,必须需要用上getter,
   否则只靠computed计算state是无法watch

亲测,可行代码
vuex里面

//基于axios封装接口,返回是一个promise
import api from '@/api/mock.js';
export default {
  state    : {
    test_num: 0
  },
  getters  : {
   test_num: state => state.test_num,
  },
  mutations: {
    SET_test_num(state, res) {
      state.test_num = res;
    },
  },
  actions  : {
    test_num({dispatch, commit, state}, query) {
      /****------ 模拟 并且 判断 前期错误 ------****/
      // {}
      return api.test_num(query)
                .then((res) => {
                  /****------进行所有的 后期判断------****/
                  let {data, code} = res.data;
                  if (code >= 400 && code < 500) {
                    commit('whole_notice', {title: `test_num`, desc: '接口出错'});
                    throw new Error('test_num 接口出错', err);
                    return;
                  }
                  if (!data.length) {
                    commit('whole_notice', {title: `test_num`, desc: '接口无数据'});
                  }
                  /****------目的------****/
                  commit('SET_test_num', data);
                })
                .catch((err) => {
                  throw new Error('test_num 接口出错', err);
                });
    },
  }
};

vue组件里面:

 computed:{
    ...mapGetters(['test_num'])
  },
  watch:{
    test_num(val){
      console.log(11111);

    }
  },
  created(){
    this.$store.dispatch('test_num')
  }

使用 module,使用 namespaced

情况:

1. 相对比较繁琐,必须加上模块名称,才能使用
2. 无法在webstorm中,ctrl+鼠标点击进行跳转
3. 不需要getter也能够用watch

亲测,可行代码
vuex里面

//基于axios封装接口,返回是一个promise
import api from '@/api/mock.js';
export default {
  namespaced:true,
  state    : {
    test_num: 0
  },
  getters  : {
   
  },
  mutations: {
    SET_test_num(state, res) {
      state.test_num = res;
    },
  },
  actions  : {
    test_num({dispatch, commit, state}, query) {
      /****------ 模拟 并且 判断 前期错误 ------****/
      // {}
      return api.test_num(query)
                .then((res) => {
                  /****------进行所有的 后期判断------****/
                  let {data, code} = res.data;
                  if (code >= 400 && code < 500) {
                    commit('whole_notice', {title: `test_num`, desc: '接口出错'});
                    throw new Error('test_num 接口出错', err);
                    return;
                  }
                  if (!data.length) {
                    commit('whole_notice', {title: `test_num`, desc: '接口无数据'});
                  }
                  /****------目的------****/
                  commit('SET_test_num', data);
                })
                .catch((err) => {
                  throw new Error('test_num 接口出错', err);
                });
    },
  }
};

vue组件里面:

computed:{
    ...mapState('login',['test_num'])
  },
  watch:{
    test_num(val){
      console.log(11111);
    }
  },
  created(){
    this.$store.dispatch('login/test_num')
  }