使用 module,不使用 namespaced
情况:
- 可能存在重复的action或者mutation
- 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
情况:
- 相对比较繁琐,必须加上模块名称,才能使用
- 无法在webstorm中,ctrl+鼠标点击进行跳转
- 不需要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')
}