Assuming you’re using vue-router (and you probably should be), then you’ll want to use the beforeRouteLeave guard. The documentation even gives an example of this exact situation: beforeRouteLeave (to, from , next) { const answer = window.confirm(‘Do you really want to leave? you have unsaved changes!’) if (answer) { next() } else { next(false) } … Read more
As you rightly said, $dispatch triggers an action, and commit triggers a mutation. Here is how you can use these concepts: You always use $dispatch from your methods in routes / components. $dispatch sends a message to your vuex store to do some action. The action may be done anytime after the current tick, so … Read more
As suggested here, what you can do is to export your store from the file it is in and import it in the routes.js. It will be something like following: You have one store.js: import Vuex from ‘vuex’ //init store const store = new Vuex.Store({ state: { globalError: ”, user: { authenticated: false } }, … Read more
You have access to the dispatch method in the object passed in the first parameter: get1: ({ commit, dispatch }) => { dispatch(‘get2’); }, This is covered in the documentation.
I am using axios as HTTP client for making api calls, I have created a gateways folder in my src folder and I have put files for each backend, creating axios instances, like following myApi.js import axios from ‘axios’ export default axios.create({ baseURL: ‘http://localhost:3000/api/v1’, timeout: 5000, headers: { ‘X-Auth-Token’: ‘f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d’, ‘Content-Type’: ‘application/json’ } }) Now … 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
Try the following delete axios.defaults.headers.common[“Authorization”]; // or which ever header you have to remove
Your watch should look like this. watch: { searchStr: _.debounce(function(newVal){ this.checkSearchStr(newVal) }, 100) }, This is a bit unusual, however. I don’t see why you would want to debounce a watch. Possibly you would rather just debounce the checkSearchStr method. watch: { searchStr(newVal){ this.checkSearchStr(newVal) } }, methods: { checkSearchStr: _.debounce(function(string) { console.log(this.foo) console.log(this.$store.dispatch(‘someMethod’,string)) }, 100) … Read more
Yes they can. The invocation I use is document.getElementsByTagName(‘a’)[0].__vue__.$store.state This assumes the first link has vue properties, which is almost always the case. If not, try other tags. The UI is unpleasant, but adequately self-documenting. It’s a useful debugging tool and something a user could do. Of course, a determined and skilled user could write … Read more
The reason why option #4 is not working is because you’re returning a function that never gets executed: function catchPlugin(outerFunction) { return function async innerFunction(args) { try { const data = await outerFunction(args); return { data } } catch (error) { return { error } } } } Usage: const execute = catchPlugin((args) => { … Read more