需求如下,当项目中当前组件的控制按钮被触发了,其他地方的函数也会被调用,但是这两者直接又不存在任何的层级关系,
一、点击触发事件
submit() {
this.$store.commit('WORK_LIST', this.num)
},
传递一个会动态改变的参数
二、VueX 中赋值
state: {
workList: null, //传递过来的状态
},
mutations: {
WORK_LIST(state, val) {
state.workList = val
}
},
三、通过状态调用其他组件的函数方法
computed: {
listData() {
return this.$store.state.workList
},
},
watch: {
listData(newVal, oldVal) {
console.log(newVal, oldVal)
// 数据变化后,调用组件内的函数
this.getList()
},
},
methods: {
getList(){
console.log('调用当前这个函数');
}
}
注意事项:Vuex 传递过来的参数必须是动态的否则computed监听 会将他视为未发生改变的不会调用getList的函数