I'm making some async vuex action which I called from component, and then that action will store something on localforage, so what I want is to detect that change in localforage from component, which method should I use?
emit something from vuex actions to component (how?)
detect localforage change in component (how?)
here's my vuex actions:
const actions = {
someFunction(){
var data=[]
for (let index = 1; index < max; index++) {
someAsyncFunction.then(function(value) {
if(value === null){
data.push(value)
localforage.setItem('smth', data)
}
})
}
}
}
Note: I don't want to use vuex state management
Related
I would like to implement a auto refresh feature for my VueX store.
Everything the user refresh their browser, an actions in VueX store will be triggered to load the user profile from API call.
Is't possible to achieve that?
import apiService from "#/services/apiService";
import apiUrls from "#/services/apiUrls";
import { getToken } from "#/services/jwtService";
// Code to run actions when user refresh
getToken() !== null ? this.actions.getUserProfile() : "";
const state = {
userProfile: {},
};
const getters = {
userProfile: (state) => state.userProfile,
};
const actions = {
async getUserProfile({ commit }) {
console.log("here");
try {
let response = await apiService.get(apiUrls.PROFILE);
commit("setUserProfile", response.data.data);
} catch (error) {
console.log(error);
}
},
};
Thank you.
A user refresh means that the application will be re-executed. So basically main.js will be re-executed, App.vue re-created, etc.
That means just have to call your code in main.js or in a created lifecycle hook of any top-level component.
By top-level component I means any component which is created early in the app
I have the following problem:
This is one of my mutations:
tryAutoLogin(state) {
console.log("Trying auto login...");
const token = window.localStorage.getItem("token");
if (!token) {
return;
}
const expirationDate = window.localStorage.getItem("token_exp");
const now = new Date();
if (now >= expirationDate) {
return;
}
state.userData.loggedIn = true;
state.userData.username = token.identity;
// desired: this.$router.push("/dashboard") => results in undefined
}
Currently I commit this mutation inside my component in the created phase of the component:
created() {
this.$store.commit("tryAutoLogin");
this.$router.push("/dashboard");
}
This is not a great way to do it, since I would have to output a value, store it in a variable and use if/else to this this.$router.push("/dashboard").
How can I solve this in an elegant way? Favorable inside the mutation like in the // desired comment. Is there a way to access the router inside the Vuex store?
Pass the vue component instance to the mutation like:
this.$store.commit("tryAutoLogin",this);
in mutation add it as parameter vm then use it as vm.$router.push("/dashboard") :
tryAutoLogin(state,vm) {
console.log("Trying auto login...");
const token = window.localStorage.getItem("token");
if (!token) {
return;
}
const expirationDate = window.localStorage.getItem("token_exp");
const now = new Date();
if (now >= expirationDate) {
return;
}
state.userData.loggedIn = true;
state.userData.username = token.identity;
vm.$router.push("/dashboard")
}
I am using Vuex for state right now and taking advantage of getters to acquire state so that I don't have to use props. However, I am curious if I can use Vuex to replace this type of function emitting. How would that be done with Vuex, if it's even possible.
Parent
<child-component #handleselectproduct="selectProduct"></child-component>
selectProduct: function() {
axios.get()
}
Child
<button #click="selectProduct></button>
selectProduct: function() {
this.$emit('handleselectproductselection');
}
You could use vuex actions and mutations. Mutations are used for synchronous and actions for asynchronous calls. You could imagine them as setters as opposed to getters that you already use. So in your current example, you would call an action which may or may not set a state property through a mutation. you would define this action with:
const store = new Vuex.Store({
state: {
selectedProduct: {}
},
getters: {
getSelectedProduct: state => {
return state.selectedProduct
}
},
mutations: {
selectProduct(state, payload) {
state.selectedProduct = payload
}
},
actions: {
async selectProduct(context, axios) {
const { commit } = context
const product = await axios.get(...) // some call
commit('selectProduct', product)
}
}
})
After defining these, you can call the action through the this.$store.dispatch('selectProduct', axios) method in the child component and have your result available in the parent component or wherever else you may need it. And if you need some sort of notification that the property has changed (you need to do some change to the selectedProduct data and then show it), you can set a watcher function on the respective getter or just use computed properties that use the getter and they will pick up the change.
You can find out more about actions at https://vuex.vuejs.org/guide/actions.html
I'm trying to figure out how to properly update a getter value when some other variable from VueX changes/updates.
Currently I'm using this way in a component to update:
watch: {
dates () {
this.$set(this.linedata[0].chartOptions.xAxis,"categories",this.dates)
}
}
So my getter linedata should be updated with dates value whenever dates changes. dates is state variable from VueX store.
The thing is with this method the value won't be properly updated when I changed route/go to different components. So I think it's better to do this kind of thing using the VueX store.
dates is updated with an API call, so I use an action to update it.
So the question is how can I do such an update from the VueX store?
EDIT:
I tried moving this to VueX:
async loadData({ commit }) {
let response = await Api().get("/cpu");
commit("SET_DATA", {
this.linedata[0].chartOptions.xAxis,"categories": response.data.dates1,
this.linedata[1].chartOptions.xAxis,"categories": response.data.dates2
});
}
SET_DATA(state, payload) {
state = Object.assign(state, payload);
}
But the above does not work, as I cannot set nested object in action this way...
Getters are generally for getting, not setting. They are like computed for Vuex, which return calculated data. They update automatically when reactive contents change. So it's probably best to rethink the design so that only state needs to be updated. Either way, Vuex should be updated only with actions/mutations
Given your example and the info from all your comments, using linedata as state, your action and mutation would look something like this:
actions: {
async loadData({ commit }) {
let response = await Api().get("/cpu");
commit('SET_DATA', response.data.dates);
}
}
mutations: {
SET_DATA(state, dates) {
Vue.set(state.linedata[0].chartOptions.xAxis, 'categories', dates[0]);
Vue.set(state.linedata[1].chartOptions.xAxis, 'categories', dates[1]);
}
}
Which you could call, in the component for example, like:
this.$store.dispatch('loadData');
Using Vue.set is necessary for change detection in this case and requires the following import:
import Vue from 'vue';
Theoretically, there should be a better way to design your backend API so that you can just set state.linedata = payload in the mutation, but this will work with what you have.
Here is a simple example of a Vuex store for an user.
export const state = () => ({
user: {}
})
export const mutations = {
set(state, user) {
state.user = user
},
unset(state) {
state.user = {}
},
patch(state, user) {
state.user = Object.assign({}, state.user, user)
}
}
export const actions = {
async set({ commit }) {
// TODO: Get user...
commit('set', user)
},
unset({ commit }) {
commit('unset')
},
patch({ commit }, user) {
commit('patch', user)
}
}
export const getters = {
get(state) {
return state.user
}
}
If you want to set the user data, you can call await this.$store.dispatch('user/set') in any Vue instance. For patching the data you could call this.$store.dispatch('user/patch', newUserData).
The getter is then reactively updated in any Vue instance where it is mapped. You should use the function mapGetters from Vuex in the computed properties. Here is an example.
...
computed: {
...mapGetters({
user: 'user/get'
})
}
...
The three dots ... before the function call is destructuring assignment, which will map all the properties that will the function return in an object to computed properties. Those will then be reactively updated whenever you call dispatch on the user store.
Take a look at Vuex documentation for a more in depth explanation.
I'm working on a project with Vue, Vuex and Vue-Router, but I'm having a big problem wrapping my head around the flow of async actions and components.
In my main component I dispatch an action to fetch a list of projects with ajax.
My list component receives the array of projects from this getter:
allProjects: state => state.projects
This works great since the default state is an empty array. My problem is when I want to go to route project/:id, if the projects are already loaded it works with this code:
computed: {
project () {
return this.$store.state.fram.projects.find(item => item.id === this.id);
}
}
But if I refresh the page while at route project/4 nothing works. I understand it's because the action fetching all projects is not finished yet. But I was hoping Vue(X) would realise it when the array is populated and update the computed project variable. Is this wrong? What is the best approach to this?
Create getters in your store that return the state and use mapGetters in your component. while destructuring the desired getters.
computed: {
...mapGetters([
'your_getter'
]),
}
API: https://vuex.vuejs.org/en/getters.html
I agree with Georgi, shift the logic from the computed property to a store getter:
store.js
const getters = {
project: state => {
return id => { // note this passes the id from the component
return state.fram && state.fram.projects // in case async not done yet
? state.fram.projects.find(item => item.id === id)
: null
}
}
}
myComponent.vue
computed: {
project () {
return this.$store.getters.project(this.id)
}
}
Not too sure about the use of mapGetters in this context though.