How to refresh the view dinamically without using websockets

I’m creating a Goals web app. But i am facing troubles updating the data when i create a new goal.

This is the process i follow.

  1. Press button “Create New Goal”.
  2. It shows a dialog with a form.
  3. User presses “Submit” buttom when the form is filled in.
  4. I call The API to create a new goal.
  5. I recieve the response from my server and i save it in my store.

What I want to do after is to update the view with the new data stored in my store without the need of refreshing the page itself.

After the user is logged in i use the “mounted()” hook to request to my server all goals the user has, then i save it in my store

what kind of tool do i need to use to refresh the view every time the store has new information?
or
How can i do to update the view when there is a new goal created?

Hey!

I suppose you have somewhere in your store the state with the goals you get from the mounted request.

I imagine something like:

{
  state: {
    goals: [], // Initially empty
  }
}

In your mounted you commit or dispatch to add the new goals to the list. You need to do the same after creating a new one but instead of replacing the whole list, you should push to it.

Be aware with issues when mixing reactivity and Arrays, it shouldn’t be your case with push but it is always good to be aware of that: Reactivity in Depth — Vue.js

By the end you will have something like:

{
  state: {
    goals: [], // Initially empty
  },
  mutations: {
    setGoals(state, goals) { // Used in your mounted hook
      Vue.set(state, 'goals', goals);
    },
    addGoal(state, goal) { // Used when creating a new goal
      state.goals.push(goal);
    }
}

Hey viniciuskneves, Greetings. Thanks for your answer.

Your assumtion is right, i have two module in my store Auth and Goals.

In my Goals module of my store i have the state.

export const goals = {
  namespaced: true,
    state: {
      newGoal: false,
      goals: [],
      tasks: []
  },
  actions: {},
  mutations: {}

In my actions object I have a function called getMyGoals(), it returns an array with all goals the user has.
Then i commit the data in mutations and refresh the state with the new data.

this happens when mounted() is executed i do this because my dashboard should show that data after the user is logged in.

The problem i had is that i didn’t know how to refresh that state after creating a new goal. I will try what you told me, pushing the data using mutations and i commit it when i recieve the response of the endpoint.

My last question is: would that be enough to get an update of the dashboard after creating a new goal?

Yeah, it should be enough considering that your view/component is using the state to render the goals (through mapState or accessing $store.state directly).

oooh, this is my mistake. yeah you’re completely right. i’m not redering from my mapstate and i must do it.

I was loading it isolated.

I really appreciate your help viniciusknneves, i could solve it.

My problem was i wasn’t using the state to obtain the data stored in my store. I know right now it sounds obvious but not when i coded it. i couldn’t help it haha