Let’s say, for example, that you have a basket of fruits, and each time you add or remove a fruit from the basket, you want to (1) display info about fruit count, but you also (2) want to be notified of the count of the fruits in some fancy fashion… fruit-count-component.vue <template> <!– We meet … Read more
It could be a bit tricky to use v-model on a piece of state that belongs to Vuex. and you have used v-model on todo.text here: <input class=”edit” type=”text” v-model=”todo.text” v-todo-focus=”todo == editedTodo” @blur=”doneEdit(todo)” @keyup.enter=”doneEdit(todo)” @keyup.esc=”cancelEdit(todo)”> use :value to read value and v-on:input or v-on:change to execute a method that perform the mutation inside an … Read more
This is a known use case. There are different solutions. For example, one can use vuex-persistedstate. This is a plugin for vuex to handle and store state between page refreshes. Sample code: import { Store } from ‘vuex’ import createPersistedState from ‘vuex-persistedstate’ import * as Cookies from ‘js-cookie’ const store = new Store({ // … … Read more
actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete – is by returning a Promise and resolving it later. Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later – all asynchronously … Read more
You can even make it shorter and use the root Vue instance as the global Event Hub: Component 1: this.$root.$emit(‘eventing’, data); Component 2: mounted() { this.$root.$on(‘eventing’, data => { console.log(data); }); }