如何从 vuex 商店为所有用户更改状态

Question

您好，我正在将 nuxt 用于 CRM，但我在使用 vuex 时遇到了问题。当我更新商店时，它不会为所有用户更新。我在 vps 上使用静态部署，并使用 REST API 与我的 mysql 数据库进行通信。我使用 vuex 的模块模式。

例如，我的商店是这样的：

角色/actions.js

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

角色/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
  }
}

角色/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
}

角色/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
})

所以重点是当我更新NumProsit 它更新equipe 然后currentEquipe 从角色中获取相应的设备。它有效，但仅对我而言，其他用户看不到更新。 所以我想知道我是否需要使用我的数据库来存储这些数据，或者是否存在 vuex 的解决方案。

我可能误解了 vuex 的一些观点。

非常感谢。

Answer 1

Vuex 用于在浏览器中为单个用户管理应用程序状态。 您要做的是更改多个用户的状态。这将需要您利用 websocket 实现。这将允许您的后端将更改广播到您的客户端应用程序。