How to change state from a vuex store for all users

Question

Hello i'm using nuxt for a CRM, but i'have a problem with vuex. When i update a store it doesn't update for all users. I'm using the static deploiement on a vps and i use a REST API to communicate with my mysql database. And i use the module mode for vuex.

So for exemple my store looks like this :

role/actions.js

export default {
  updateProsit: (context, value) => {
    context.commit('updateProsit', value)
    const equipe = (value % 11) + 1
    context.commit('updateEquipe', equipe)
  }
}

role/getters.js

export default {
  role (state) {
    return state.role
  },
  numProsit (state) {
    return state.numProsit
  },
  equipe (state) {
    return state.equipe
  },
  currentEquipe (state) {
    const out = []

    state.role.forEach(function (item) {
      if (item.equipe === state.equipe) {
        out.push({
          role: 'Animateur',
          user: item.Animateur,
          avatar: 'https://luckysketch.files.wordpress.com/2017/06/chibi-siberian-husky.png'
        })
        out.push({
          role: 'Secretaire',
          user: item.Secretaire,
          avatar: 'https://luckysketch.files.wordpress.com/2017/06/chibi-siberian-husky.png'
        })
        out.push({
          role: 'Scribe',
          user: item.Scribe,
          avatar: 'https://luckysketch.files.wordpress.com/2017/06/chibi-siberian-husky.png'
        })
        out.push({
          role: 'Gestionaire',
          user: item.Gestionaire,
          avatar: 'https://luckysketch.files.wordpress.com/2017/06/chibi-siberian-husky.png'
        })
      }
    })

    return out
  }
}

role/mutations.js

export default {
  // eslint-disable-next-line no-return-assign
  updateProsit: (state, data) => state.numProsit = data,
  // eslint-disable-next-line no-return-assign
  updateEquipe: (state, data) => state.equipe = data
}

role/state.js

export default () => ({
  role: [
    {
      equipe: 1,
      Animateur: 'Gurvan',
      Secretaire: 'Francois',
      Scribe: 'Benjamin',
      Gestionaire: 'Kevkev'
    },
    {
      equipe: 2,
      Animateur: 'Kevkev',
      Secretaire: 'Remi',
      Scribe: 'Louis',
      Gestionaire: 'Francois'
    },
    {
      equipe: 3,
      Animateur: 'Francois',
      Secretaire: 'Julien',
      Scribe: 'Gwn',
      Gestionaire: 'Mmouky'
    },
    {
      equipe: 4,
      Animateur: 'Remi',
      Secretaire: 'Benjamin',
      Scribe: 'Armand',
      Gestionaire: 'Gurvan'
    },
    {
      equipe: 5,
      Animateur: 'Pauline',
      Secretaire: 'Gwn',
      Scribe: 'Mmouky',
      Gestionaire: 'Armand'
    },
    {
      equipe: 6,
      Animateur: 'Benjamin',
      Secretaire: 'Kevkev',
      Scribe: 'Julien',
      Gestionaire: 'Gwn'
    },
    {
      equipe: 7,
      Animateur: 'Mmouky',
      Secretaire: 'Gurvan',
      Scribe: 'Remi',
      Gestionaire: 'Pauline'
    },
    {
      equipe: 8,
      Animateur: 'Gwn',
      Secretaire: 'Pauline',
      Scribe: 'Francois',
      Gestionaire: 'Louis'
    },
    {
      equipe: 9,
      Animateur: 'Louis',
      Secretaire: 'Mmouky',
      Scribe: 'Kevkev',
      Gestionaire: 'Remi'
    },
    {
      equipe: 10,
      Animateur: 'Julien',
      Secretaire: 'Armand',
      Scribe: 'Gurvan',
      Gestionaire: 'Benjamin'
    },
    {
      equipe: 11,
      Animateur: 'Armand',
      Secretaire: 'Louis',
      Scribe: 'Pauline',
      Gestionaire: 'Julien'
    }
  ],
  currentEquipe: [],
  numProsit: 13,
  equipe: 3
})

So the point is when i update NumProsit it update equipe and then the currentEquipe get the corresponding equipe from role. And it works but only for me the others users do not see the update. So i was wondering if i needed to use my database to store these data or if a solution exist with vuex.

I probably misunderstood some point with vuex.

Thanks a lot.

Vuex is only meant for local client side state. If you need to update the local state other users then you need to incorporate web-sockets. I would recommend socket.io — Olian04
Thank you, that's what i tought i've found a solution but i will keep yours in mind — gurvan seveno

jcmortensen jcmortensen · Accepted Answer · 2020-05-27T10:33:57

Vuex is for managing app state in the browser for a single user. What you are looking to do is to change the state across multiple users. This would require you leverage a websocket implementation. This would allow your backend to broadcast changes to your client side app.

How to change state from a vuex store for all users

1 Answers