Что такое Vuex?

Vuex — это шаблон управления состоянием + библиотека для приложений Vue.js. Он служит централизованным хранилищем для всех компонентов приложения, с правилами, гарантирующими, что состояние может изменяться только предсказуемым образом. Он также интегрируется с официальным расширением отладчика Vue devtools extension (opens new window) для предоставления расширенных функций, таких как отладка с путешествиями во времени без конфигурации и экспорт/импорт снимков состояния.

Что такое "шаблон управления состоянием"?

Начнём с простого приложения Vue для счётчика:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

Это автономное приложение с такими частями:

• Состояние, источник достоверной информации, который управляет нашим приложением;
• Представление, декларативное отображение состояния;
• Действия, возможные способы изменения состояния в ответ на действия пользователя из представления.

Это простое представление концепции "односторонней передачи данных":

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAANiCAMAAAAJ1pSuAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAflBMVEX////T4vqyy/bjdHSkwvT3+v3q8/ngZmaOfMNCuYNfxJa80/fnh4fV8OS7sNvIv+Lf6vygkM3I2/md27/n4/Osn9P31dXwsrKWhcfto6Pzw8OpxfSF0q/+9vbTzOj54eFOvotwyqHy7/jd2O2s4Mr87OzqlZW45dHF6tmjv/KbsHLLAAAgAElEQVR42uzdy3biRhQFUINsNEADlgfSkrwURuj/PzHYvCTxEjTFq/aeJHHo7gTTp2/VvVX6+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4pc6XipWyXP9NtfyatwZ4U/Nl6JVZlqSnZFlZ5Hnt3QLeJ/qaLL1I1hT5wjsHvLK8apL0allZzb2HwOup8zJL/12SFTYHgVcKv6pM0hvKCpUg8ArmVZbeXtJUNgWBp5bftvTr7wkqBIGnTb80tEQGAk+48g1Z+3Uz0FoYeCKL6k7pt14LV2algecQpOthKQw8vbpI0ofIKm8+8NC1b5k+TlJYCQOPkmfpg2mIAA9RJekTyJyUA+KMPxEIRBx/IhCIOP5EIHA3j299aIcAD7F4yvj7ZSgGCKou0ueVGI0GAq5+k/Sp2QoEolv9trYCrYOBAKvfMn0JikAgttVvax2sHwzEWP5phgC7Ns/Sl6IIBG6lSF9NYicQiLH8W2m0g4F/VqWvSREI/KOX6n70z8b59gHRLX8tg4F/9zrDf0eWwZ4dB1ypTF+dkUDgKnWWvoHSNxK42DxJ30JmIxC4UP4m+bdMQBuBwEWq9H1ohQCXKNJ3ohUCDFemb0YCAsO8R/tXMxiQfxIQiDv/JCAQb/5JQCDe/HM3AhBv/jkUAsSbf1bBQLz5JwGBePNPAgJHRJB/EhA4qExTCQjIv3fmXDDQU6XR8LxMINb8cz8g0JGnMUkMRANb8ySqAHQkBNiqszQyjW86sNKk0Sl814FfRRohrWDgI7YGyLYRsvCdBxZJlAGoEQJE2ABxJg5YK9NoORMHkcvjzT8nQiBysW4ArrcBfQAgZlkaNdOAELEqjZxpQIjWPPb8cy0CRKvOog9Ah4IhVqX8swgGC9CLYCAuFsAOhECsCtm3YhwaorOQfMahwQI4esahITK53HM1IESqTuSeYUCIlA6IYUCI1UIBqA8CsXIGpMfdqBANHRDnQSBaRmCMwoACECUgKABRAkIUKmmnBIRYGYFRAoICECUgKABRAkIUtICVgBAtLWAlICgA2SsBfTxAAehEMPCOXISvBIRouQbmJPcCwhtzEfRp7gWEN2YI+gxPB4H3pQA8w1PS4WZnB0QGgWhpgZiEgVjV8k0bBGKlBaINAtFyCsSBYIjVXLppg0CstECcBoFoGQI0CghWwFgDgxUwh8x9VsAK2BoYsAK2BgasgK2BgZdkCtoaGGLlLnzngSFazgE7DwzRasTacO7Egvci1S7Q+LzAO3EXtEEYiFYh1QzCQKwMwVzEpYBgC9AgDGAL0CYgYAvQJiDwakwBmgSEaLkKy3FgiJWDwDYBIVp6IBerfWrgTbgL8GKeDQfvwhi0UWiIlh6ILgjEqpZnzoJArPRAruBjA+/BbdDOgkC0NIG1gSFamsDawBAtTWBtYIiWNNMGhljNpZnTwBArUzDmYCBahTC7hqejgwA0BwO8MGOAV3EpNLwDY4AGAUEAPteYSZVXjQAEwnriMbtn3p5sfHJAAAa9a+CJD6mYhAYBeLZQmq9cuJytn35/UgDCGwj8SLjNtMjZO7eqTkw+fwXoKAi8gfw+MXH22um/V21HcrL62fcAHQUBATi4VdAMScrdTGJS5NVzD+j46IAAHDouXA3ZUnuloWwfHXhCs5/p92g2eY4A/FvJVgP2GksBCPy7r8+VgTlYBV8BL1bVXX9Bm5VVVWbbFe/fa4okyZLfzsffX7N2DyRZvr5oOl9ZvzZNyqL3r9KkKarl1wQgxGb82TZe5uDkRA4WwVfAVbrf0Ug23eG63LtYoNies5jvv36RdRNo+Y/FamamblrHSDY/exWuj+w2BHhG088DjuZg0ABcrNa1eTfNtpm1WYPPzwVg+/VVt2+c7IKoOXBIow62qv5v+Y7+mky+fObgaYw+j9vPwZABuFn7ruIs6Z/zGByA3WJr0Q7Aeb33L7K68+pQNWCn0J5OL9h2BcKZfJ71l4NfwQPwL8bqvZO9RT+gzgRgeXjbcv//vDwQl8FmacaH3taRchAe6+tzqOVv2FERegWcb5rB894hsnlVVPVfQFX5OrQW+VLTC8BkvceX/768FWq7DM3rbTG5PUZXJklThewrj4+9qd8zIQiPMx6cgJ8/syL0CnjX5UhasbguCJOmnZW7uGoH4OoH17+plyxaa93NEjrZfn2++1VXWZgF/L879S5LQHiY78H59/0VcglcbMu19pRfc3Dv8XgAJu3XN60SsL0eXv0C9S4A6+DHiE8E4NhnEB5mNHQFPAm7BzjfVmvtqqw6GFDHA3C9A5i0r4kpdgHYtIOx9ZK6SB4WgN8+g/Awk2Gr39GhSuzmFyFUrVBqtYDzdGgAFq1V72Y9nPcDMGul5Pb4XR50EDqfTGaj0Wi61H9rZz6D8DhD8m/69RE4AFelW178WuzCatHKxSEBWLW2Azv/dCwAW03lRcAI7DwX82symo5tAcIzON8FGW+LlHBngfePSlS9ReygAMw7/5mtevBoALZmowOe9Nt/2zcpOPUJhMeZ/QxofgQPwAM3htb3qQB/76He/prl/QJwk4JWwPAoX6Oz9d+0fWYhWAAeempQc/UeYD18D7B3HPhJLkP4+rYwhtBGPwObH8ED8NCTw6vd1wd3gduTL0e7wNn+T5pUnR/46AAcdepuIITvoc2P4AG4PpCxVm337pqDv27eXRjvzwG25/3ac4CH9gA7EVw+RQB+/fS2HoAAK+ABo39dQVfA896OYLZrn/4lWjYv22G1vbmgfRKk2m3mre85mKenAjD7Oxyy/YGBGsEXPhVutr/7Cty3BBwd+O0XdAVc9Na4RWtzsM6rxXYienNBQlX+PQqkcxZ4nZjzat3aqLOTATj/+2mypji41n5QAI4PNaCAG5sMX/0GDcBFr/zarYF7u4NV+8aDTanXuQ2m304p0lMBWN1niX9ZAM6O9OCB25ouk2528N6Dw6/PQubDXlM4aZV0nf+A7uOTuvcBVgcj7XAAJp3bAMOdCS4vC8CfTxEI9ygBvycfHz+nRv/uEYD9O+27dxq0bgSsi96l938/qPfDm11k7q54PlIBJu24XAS7DrC4cG+2254fz3xQIWQZeK75ETYAF70twM1X1pmWba7waz20YxMpiwP5mVSbSwGT9EwAtn7yOuBT5opLvyW9CJwqAiGU0anRv4M7aneXNL0nuS2TqynKJhn++hM96LIos6DXwVzxTKRuBJ78pgBnf0MdL+smw4uNRwXgi3vqoXDdCBx7ighcbfZz/OLNr/PNj41cmF0/5315BH5rhsANyr/pyYvnxoN/jwnAe5yEOxKB5/50Ag6Xf6fvXp8OXmXVwiz8HHR3f2KsGQL/Wv79Oppvo+H77NLszgHY6VH9CEC4toQ4evfmZHhxkYmzO0zBHPkT7FMvGK7fRDpaAg6ftW3E2d0DcHs2xO3RcPUO0oktvuFP5zYHc68pmP0/xyyA4drtoxtNUWgD328Kpv9H2cwHGq7ZO7rdHO1cnF1+jOU2b738g0tqhp8QQ7Ty7M5NYOCagiHMBO3/7N1rWyLHEgDgAMIDQpRFgQW8rHE1nv//B4+66qrrPcxM9dT7Jh/y5EMuTFNUVVf32Ab+tJXFCDWbVTQ+uxLQPmttNUK97b9uVQeo1gJa/ZvAwNfaf90tz07YBq7vJDDwBY+mX2Zb/4cLaPZAIHD5+6j9N93+P94uSKQ9ELPR8Fr9W8klmnZBArUAZ+5JhecRsNLLk+yCNHAO5PVex0YEhKemFbX/bl0IaU2cA3n1OYuA8LwyqvL64J6gFqMFOKiu0QtlR8AKe0OagDHGoPubHREQXvxyVLg7qAn4KRdV5vkuSoWaaQIGaQE+ioAzyxJqYhIwyhRgRwSEumkChjkIPPXCOKiZ48BxDgJPN1Ud+gZeZhDmwy6rfhYDERDUwNmGYF6IgPqAUAeDMAGGYH5HwK4ICDU6Ftg+qJarsPoiIIn1p7X/K70ePUwFfEsEJG/8a+CFsWrgOBWwHJDUxg0sezVwoApYBCSxWSPLXg0cqQIWAckd/2pf9mrgSBXwDdMwJNRpagrWLHSkCvhJBBQAyWLa2CkAs9ChKuBHEXDqa4H4V7VT4e1dvZqfyW0EFP9IF/+aeC2EGvhdq79qj4Ab8Y8sHpo+jbwWxzbIu07rXxJekIT4VwujgKG2QCCX34NfDVU9tkFCbYFAKk3HP9sg722BHFukUJFZ869E9GqQWFsgkEYnwAsRbYNEOQUCuQxCHHsyCSMBhAbi3/0GcLfR/4ylMBdpBgZyeNgAbvg1OMdSQDMwULdxowOAUsCPWFimUIkAG8BSwGDHgCGLaYAN4HuGoQ1BQyMJYIRr3y6kgME7gIOxbwzt0omwAaILWEQHsON+VFrnZgpmEyL+6QKGTgD7Yzek0kL97ibKvUdSwLgJ4ODXuFSQ30rY4tqO8h8iBYybAI5DjMtDm0kBw3YA+16TBFWTAoY9BTwIMzEKbbUQ8p7OQAe6Bub+0iBtQKiKewGfWEZ6NvdtQNOAIAWsIwEMdRH0QxuwY51CNRyIi3sIbqAIhmoZhQl8DdbMLAxUy+X4D8Ldg/pweaQiGCpiHyTiDsjTInjHS9OhGl6RebcDEvHhdGLcHw7t5TxIrFtgnhg7EAKK4ERnQJ62ATeKYErWid/AVgRHGwF8ZGonmIINdnbG4fs3iuDAL0Ia2wmmXDeDDJvwa3eiAA5LEUzBBfDdcc7gSWD294NMjgM/HEUwpbr/9Q5/mCn5OPRp6IejCKZQ5SzdS2eA/YxCJcVLARcaZT4TPIn+cH41UjZT3yhKLICLaF/nvRirdxz+4dxUEjP5H2WZFdW7SdsGXMR/Nv2drj1gCjMobPdupQEYdy35OlFaAdwtbH7rOOU04MpKhQp0ijvGnnEacHJspUIVbZvyLjLKtxHSO7VSoQLjEl/rmm4jZGGhQgUGZb7TMNlGyNpChSp0Cx3eT7URYgMEKtEp9fhmpq1g8Q8qcX8GpMALPPKcibMBDNWYlbgDcue0J/4B/yEBLHMHJFUENAADFRmXfYfvWvwDvmpQ+qsM1+If8EXd4u+vXIt/wJdMW3CD+Vr8A76i39mU/w6btfgXeoW5HZXIC7TQEZgUEbD4+HfzAzvzLSNyCJyNS/9fWIt/MTssv1rMUkAQAdPFv37pIwZQSgTsiX/x3J8ykgJCtdp3JmRyUX53RQoINUXAlt0N04rzv1JAqEm7bsdqx/1XUkCoLQKuxD8pIKTVmgjYmvvvpYBQn3aMw/Ra9P4jKSDUZ9GCzeAWbP8+SgE3UkCoTflbIat2Xf/ckQJCjVbaf1JAUAY7/REoBXQpDNSj3Jnoyxa+/ajfgjsnoSSFTgT21q18GrNi37sKyuD6dn9bevlzv+AXr9JKCZbi8aXDH1GMpYCEin873Wn7W9JlJYFtGn5+blD2q1dpm5t7ejed1ofAkpLA5XHbF9y1sa8egX6QJYG6f3WVHIah0ZJpIAksYTu4t0xRcxiGJoRcm3LxZwJbdfT3Fc7DEUa2sazYrwtp8+bHox/djWForEV1cNtP/r75q5th9oDoMjako9bBq+MsT6C/szMzBUMAOfvRi4Ah8PIi0QOQ/BFC2qHUaCFwsrAYoW7jvDOpkaYChT9opheT+GB6lA1h4Q8akf1qogiF8OrUOoRGmMc6bXYopre6sAqhGQ5lXjteNlYJ95bHFiE0ZexM5q11I5XwpdYfNKjvYrbflXCv7uRP7QuN6ria95HFqsbOn+QPmtZ1JP2J43pKYaUvBDCwBfKHi6pj4OXavgdEMHMz+Yt54KKqfuB15Sv6QRAbryd8zelysv3Uz8AzxHE3BLhRAb+SCG4vCE6W2n4QiyHA9y3Wl/+xHO7J/CAgQ4AfdLFYrr6UC05Waz0/CBoAO11DgJ8Mgx/MBieT5XJhzvnjK9GPME0YzLqGAD9bFC8Wy+Xl5NofUW+yWi7XC0nf53+HtWFoKgbaAqHB8Nd1FgnIaqMRDWQ1M4oAZDV1HweQlWEsIK+xG4kANTBA0hrYOBagBgZIo+NWSkANDJBN1728gBoYIJn7d3P5JIC0NbDDIEA+LkQA0nIYBEjLIAy1Go+n1hqBFqRBGGp0W2/MLDeC6GgCUp+BlgtWJH5vIYSNJiC10XEh5pJ0Iww1sOdGMFOn4aiLhgvR3A3CbHwSVM7cPeF0r9O/jrNw1LPWtAAJVgMLftRabWgBAgl/a/WbgaxmJg6ArFy+BmTVd/0ukNVACxDIqqMFCGTlIDCQVtcUIJCUQ5dAWvZAgLTsgQBp2QMB0rIHAmTVdxkqkJWrYIC07IEAaY1dBQNk1R90xl17IMRdn7Opj4FqSQCJuCzHG2/rApIGwOc7dP3BwG81kKP+vZvRmnY6s/G4a2IfSBH6BoPrqHe3Q/eEbjXQWtP7VO9lBlaB9hrsvMnAKtBi3TcDoD0QoM018Fvxz729QNoUUAsQSJsCagEC7bbRAgSy6rwa/1xbCbRc/9UU0KlgIG0KOPXZAG1PAV8LgM7BAa030wIEpIBagIAUUAsQSOLlKxF8Lmx3mQ10lQlp7Bwctayy7ti6oogU0Dk4tktlQVRd5+CoJwAaLiCeqauwqCcAKoEpIQW0TtmugYVFOSng1GeCAEgWG+fgqCMA2lwjoo5zcNSxwgRAInp2K5ZzcAiApE0Bpz4QKllgxquImQJqAVKlmQBIAQtUC5BKjAVASkkBtQCpKAD6IIi9Qv1MU4WuAEhoA1dhUR1Li1JSQNP6CICkTQHNaiEAkk5XC5BqA6BbhohrapFSbQDUXSF8CmgIBgGQtCng1AeBAEg+v65EcA4OAZCMOs7BIQCSOQXUAmT7XAhNCWZagAiApE0BtQARAMmbAmoBIgCSNgV0Do5tBr6/rx1c+/m/2z9u/vLq+m/5ZAgU9Q6v7T92fnh4/adPhq/5++rg4Ohsd/SWs7ObWKjjQlMOz/f35/P58A3f5vP9/cPDf3xYfDDj+3nwTuB7bvfo4Mrxc2r0z+HJ3vzb8DO+7e0f+rHmrdh3dXA2+rKzo5/qYqqvds/359+HX/R9vneiLuaFkvfn0e7ovzs7UBJTmfOTT6Z9L5vvC4I8Dn5noy3aPZAJsnWHJ/PhFgmCBYU/24l83tOOcxWy969b8Ptm5/YG0lt8LOK4CcRZJv+Oaki+D1sjUgERT8xkIzR7z4GnvucRT8xkHCVb/XR725zWB6Yyr9Hoxrt/rQxzOdtd9Pj3TzwxCpNkvwd/BjV7ejK586nSt+978O6SQMTuDobNWL3wA8sH3U+Hzbi275t4Vb3VA52R805clyOj6zSujp/L6eBQmBra9+jUcPObIjwbu07bNhcJSz8VVYJ/+tJEDn8/RqQ9iSEPyGQlOHv156wp9Eif5+NAhECeclhmPAnBMr+hECSZn8PIVAvsA36B6OAbIfwZJXuDwOyHVK+BqaeDcXwSSffhzEZiinb1e4oLqPR3Dr/NoxrzyotVqy9jz/90Arkr8P5MLTvdkM0/yprBaqDs9sfhjdXB6t+K6uDPSnVb3j7nlRp6d/RqBC79oPzrtK9YSGMxBSW/v0YlcNmyP/ZO7fdRnUogJ4XIogECAESDwgRiET+/wvPTBKIbUwu7dgx9lrzNG3TtKq1tG/eEP65D80Qwj9jzRCCwBBPaR3vioYgcCekfbI3qAQS/u0gCOSvtgfKZIdQCQyMPN4hBe1g5zkck13Sn/nbhcNQxLuEmUDXmfpkr7RUmYNJf5t4r9ScUpfrym2yY0iDAzmlWbxj6IWQ/nI1DsJLfxdIgx0l7ZO9QzfYe6om3jt0g53knHjAkRKL33SxB1AIdJA28QKGor0mi72Am3HOFZaPiSf0F/6a3p7SOvaEZuSvSfnPELRCfC3/FbE/sCAG/xmbCOQv6qX/mtgnaIU4w+SX/5iJxn8YEN73X+IdNIO9o4u9o+CU4j8MCIH6DwM6QZskGBAcJ49jDAj4DwMGSRZ7Cguy8B8j0RCq/9iNgP8wIITrPwyI/wwakKcG4z8MCIH6jzqgF+Sx5zTUAfEfBgQ9Xew99IK/wpQkGBDwHwbEfx4bkL80/sOAoHJJAoHNCDumigOh5m9tl7RPMCCY7r8mFAGyGcEuUTj+Yz/gfk9pEYcD+wFtnqxjkmBAwH8OwcPi7HEKyn9cCdknWRwWDETbok0Cg2EY/LeDgWhOqR2mJDgYhtkdXRwcDMNYIU0ChFbwzgioAUwrmAYIjRAIuQFCK5gGCI0QeFDHYUIjxDRlEig0QnZEHqj/KANSAKQMCFUcLNyJM1ta6cMVYHLm77+TU9qEK0DKgBQAKQNSAAwYyoAUAJkGpAAYUwYECoD/lpIzQAGQacBgSyvH0AWYkAS7TxG6AOORQ0ACzCwMCTBJMJAAkwSTAJMEw+8hAf7LhYNAAkwnmASYJBhIgNmMRQJMEgzOMOA+kmAznFDfnQOHwVlq1EcSbIQJ8c2cOA2uMiI+7gQbIeg7wPRB9nJK6YA84BlJdEBM3QmmwuwmGdqjD0IHhD4IHRCgD0IHhD4IHZCQGTgSBIBmYDeqg3AHhD6IIbgDwlIE96EDwiiMGRiBYRTGfTqERwhoBEZgGIUhAGQUJlgYgdFdCeZcuAWXgHV7sTgXBICG4EHpbp3SBt0RAhIAEgISAAIhIAEgISABIBACEgASAhIAEgICASAhoMcQABICmuGM6AgBnYcZQEJAQ3AJhOsg7sMM4DY8I/M3cAmEG8Huwx5UroMQALIUJlhYA8ONYDOwBoYQ0H1YA/MU9gL+HPYAPoeluy7AIujnsBfwpxxQ3HPOnJHvE6G45+SckR/CEDSTMO7DEDSTMLRAmIQJFmZgmIQxAzMwtEHchxkYJmFogdAGCRZmYGiD0AKhDUILBGiD/FO4BkwbhBYIbRBaIEAbhBYIt0ECg1sgb1FyUr7JgNy4DWIGhgDJgcmAPaHhpJABkwOTATMKCGTA5MDewB4EcmAyYHJgMmAgByYDJgcmAwb6wGTA5MD0gIEcmAyYHJgMGJiFJgM2CZvxvwX3gMmBzRChNe4Du39K0Rr3gc3AJqwPYCfWl2AT1gewE+sTWrT2AZyX78DDQD6BzW2UABmE8QqGYLgMYgaGYBiEcR+GYBiEMQSrABmEcZ8OqTEIQwnQBSivUAKkCOgRPU6jCEgJkCJgoPA0EIqAlAApAgYLU4AfcuLM2IcpQCYBKQG6Qc+ZoQToPpyZN2EKkCKg+3ARmOvAhkBoXAd2H4TGdWAzMAZNF8R92IZPF8QQjEHTBXEfxqAZhTYEy1DZh+A+LEOlC2KIEz77GJai0gOhC0IPJFguHBvLNPjsYzqOzRtwD4QuiPuwDZo2ME1gd2ArNE1g7oLQBKYNDDSBaQPTBKYNDDSBaQPTBA4Flq3RBHafgYPzGiduArflud3VVkJuAyNA5mC8wIWK2nWsLtrTVpqJg2MVZEYb2AwOPBO9v48VRztaS8McDAJEgD7gwBRMu8OGNAK0iq0pmKaus6z2Zvk+6xAcEOAxvSN3W9r7R8/CcqkLczDwRQHmc80s6jIvbp4wCPga41FXPzdMS20RrdxnBIgArWJjH34m9UwHaQP1n7gwy/JPllLfXlAjQNcxPwZ40caah0cT+jgrckcTOTwb2CrmxwCLVcd0qFfzJB/k0vbEzSDgrzDfem117ZZZINebyG1kycVMQiPADWFpRuaiR8QXfSrAGgHuBPNRV697q1LKevvz5XLe16NJODk2MZ5Kah+iGzVyPLc/ATKv74AAl6HhUpMX7/YeChsBfRKgfl4kU2tpH3/DbwuQSWgXBFhqioCRJi3eFVwF8UiAj60B0diNwyrvzj4WYOeGAEeOzissJJ5Lw6BffeiyWwGyEtUjAWZyrbGpK1le+ccCHIkAd4LNdPG0CgpvLZjj8XT9p3izndI0vZyFGFX9wv72AeH/um9EBLh7GjuBUifMxAzLezbF/PniivDDNFk3VtWYZ7X0EzbFPYqsVq+I6/zvKywNGhIBOiHAs9TxEOOnXlqtIorr+AixDifVOifZowdluNDG7RYuA9vEUqCUiQ7bdEiumxx8DM000ZMAVniJjRWH3IVzQoCnVREwkj6gEaD06PGoVALHUrHQURakjYFq7sJ5JMB11e9ZFnnPk3NlcqZr5JaxRoCF9JKqQIBhCHC5DNIrJcByQ4C9WmG79JJJJyW3buXZlBYBIsCfZIpD8bYA83Wcd0+atwVYK6+JagQYhACXjLdV7HHcEOC9w3CWTHpQuiuTHGn2CBAB/sgTUfauAHVPXOueC7C2XttEgI4IsFWKgBe5dqcKUCOX+6qsVFLccon4oC8JIkAE+Omd2Shv3hJgo5sxLp4JUHfZpEOAX8bOIF6vFAEj2YeKAJfALi3bdorEIK+UuiCPRkQv/n9CgAjwZ0XAK2P9Tg3w7pZh7CrZZ1sCXLopXZYte2cKBPhdLK0DlCO3k6SxlQAvUrx4OgifPEnFw8dtjFZ8lxYBIsBfrU0ZhCGVpmmWOenmxnJ7eLxNvyyLFIb5FfNgYfV4QSHXGTsrISACdESA8txfqUSfsgDVIelSdF4kfK5XSoS9WkpEgAjws5sb+ky40f4Y2SNSLNSa3izAcd1oKX66YAYBmsDSVYyj1K24KO8tC7BUWxmR8NJUKPNdS4DpYfH4yWIJEAH6JcC1KoRtWM3LH6OSuh2PiHJc7SXolDcsEOBXsWOLJVs9iMJr9QJM1dj0IPxftON1VnC6LP8vbTodAfolwDhbdTWyNwXY1JkqwHUEWCtfMX9JjQC/iyUBngVxnfQh3izAOTZtZw6CO09CLn01ZVku/58slgARoG8CjJtuy4BPBFjnY6R5xToCnFWUzeSKZRGg1wIUxVWqIZ4kwP7pTzpPApbzF7btUgQ8WCwBIkDvBLi+3BE1zwVYdNGGMtcRYLfxm+UIMA9TvwcAABAVSURBVAgBJsI0y0XsaqwEuPm0jV5MkC/zFx6Ps017pbWCABHg54lwpbGTXoCFZtPAdgS4tZagQ4BhCHB6FAEjNVL7RICPYefyrrvo/nucrLZ1EKCXAvwb1gkh4BMB1rpJ6O0IsCICDFuA7aKxdbNWEuDW44YiOZe+B5LpHBOe5ncoESAC/J0CH9FasylAYXJwGPPqxxEgAgxEgP1SBLyr45w8rwGm5/Mk/ivlxQrH26umub9Szn0WS0v22QforQCFgl29KcC5Whh1hfCC1zXAToExmEAEOBtjmkuApw0Bzl3g9Pn3aY9zU6W9Z74XmyVABGiVwq4Am5cCnA0n3+t4owts90nBbIR+ibWnEi3Fu2glKu0c4FY3d74Y0s5fdLx/3/SpNxHgnjGujbqS3iJ6JUDlXseWAKtVytwhwEAFONf22nWvQn8TZHo6UDOVi0Zv4y+91RIgAvRKgH8v9naPy2+FEnlGq0D0bpYh1gtwufi7cmpkNZhlJb47Alwug8y1wC0BLl0QwWX9artqelnivVvuW9r9fTg5HgmwufosmlcgLIurBiWQytUS4P0L6kERYLP+wZelq8KeBSLA71NaE6C05V5aWrqxDSaa7h9oD4dV7BUdlp/+pr50/X0RoC/kdgKlaMyzLHvMwXTq5+tZW6NovMctukzNoa9r76VtMP8N2TJvk5kWICfHIQFKA35psi1AYRAmncopjeQfUxxAadVvbKsEiAA9EuBWr3RJVx9fUI3VNRF+7JAeK2EgMFuHXn9eESnp6DB2+fXpw0ODAMMRYBJtve0bG6EPvVakvfqNz9+wOexagNrlztK7yl+RCV1ghUy/YLDY2ghtOLJtODkvmewJUHyS5PGZAHXPnDyrRcCrFlcNiRYB+khldvJ50L5ptxEjdtvVtUxffbt9uFiLNjIbAtacnJek9gTY/qeaa0uASr1QeUWq2vusLy1a+l3APKPhSGl8EXVKIeCwdks3qgKsNSrViDZDgOEIsN/KVDXPBW4Psv5a7

Однако, простота быстро разрушается, когда у нас есть несколько компонентов, которые разделяют общее состояние:

• Несколько представлений могут зависеть от одной и той же части состояния.
• Действия из разных представлений могут потребовать изменения одного и того же состояния.

Для первой проблемы передача свойств может быть утомительной для глубоко вложенных компонентов, и просто не работает для компонентов-братьев. Для второй проблемы мы часто прибегаем к таким решениям, как обращение к прямым ссылкам на экземпляры родитель/ребенок или попытка изменять и синхронизировать несколько копий состояния через события. Оба этих шаблона хрупки и быстро приводят к трудно поддерживаемому коду.

Так почему бы не вынести общее состояние из компонентов и не управлять им в глобальном синглетоне? В этом случае наше дерево компонентов становится одним большим «представлением», и любой компонент может получить доступ к состоянию или вызвать действия, независимо от того, где они находятся в дереве!

Определяя и разделяя концепции, связанные с управлением состоянием, и применяя правила, которые поддерживают независимость между представлениями и состояниями, мы придаем нашему коду больше структуры и поддерживаемости.

Это основная идея Vuex, вдохновленная Flux (opens new window), Redux (opens new window) и Архитектурой Elm (opens new window). В отличие от других шаблонов, Vuex также является реализацией библиотеки, специально адаптированной для Vue.js, чтобы использовать его гранулярную систему реактивности для эффективных обновлений.

Если вы хотите узнать Vuex интерактивным способом, вы можете ознакомиться с этим курсом Vuex на Scrimba (opens new window), который предлагает сочетание видеороликов и игровой площадки с кодом, с которой вы можете в любое время приостанавливаться и экспериментировать.

Когда следует использовать Vuex?

Vuex помогает нам управлять общим состоянием, но требует больше понятий и шаблонов. Это компромисс между краткосрочной и долгосрочной производительностью.

Если вы никогда не создавали масштабное SPA и сразу перешли к Vuex, это может показаться громоздким и сложным. Это нормально — если ваше приложение простое, вы, скорее всего, обойдётесь без Vuex. Простой шаблон хранилища (opens new window) может быть всё, что вам нужно. Но если вы создаёте SPA среднего или большого масштаба, вы, скорее всего, столкнулись с ситуациями, заставляющими задуматься о том, как лучше управлять состоянием за пределами ваших компонентов Vue, и Vuex станет для вас естественным следующим шагом. Есть хорошее высказывание Дана Абрамова, автора Redux:

Библиотеки Flux похожи на очки: вы поймёте, когда вам они понадобятся.