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

Question

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

例如，我的商店看起来像这样：

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
})

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

我可能会对vuex误解了。

非常感谢。

Answer 1

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