Communication between the components via vuex?

Hello!

Continue to deal with the vue . For communication between the components decided to use vuex. Here is the implementation of the code

mutations: {
 editFileId (state, id) {
 state.editFileId = id;
},
}


Here the mutation is written to the element id after the assignment which should open a modal window and get the object.

computed: {
 fileId: {
 // cache: false,
 get: function () {
 return this.$store.state.uploadStore.editFileId
 } 
},
},
 watch: {
 fileId() {
$('#UploadEditModal').modal('show');
........
}
 },


And all would be well, but when tychek is one and the same object, it does not work the second time. Probably somewhere a jamb in the logic that it is somewhere cached. computed is not called when re-clicked even turned off the cache. Mutation fulfills. As such things can be solved?

Or it should be easier to create the event bus as a separate object and using it to communicate? Just there I realized how we still have to complicate the code so that when the component is removed to create an unsubscribe...
June 10th 19 at 14:51
1 answer
June 10th 19 at 14:53
Solution
Generally not become a fool, do it like this.
Vue.prototype.$bus = new Vue();
Correspondingly, the code looks something like this.
created () {
 this.$bus.$on('UploadEditFile', this.getData)
},
beforeDestroy(){
this.$bus.$off('UploadEditFile');
},
 methods: {
getData(id)
{
$('#UploadEditModal').modal('show');
...............
}
 }


And event generation
this.$bus.$emit('UploadEditFile', file.id);

Find more questions by tags Vue.js