Installing and configuring Vuex

As Vuex is an official companion library made by the Vue team, it is very quick and easy to install and configure. We need to install a single npm package, then create a handful of new files, most of which will be empty until we add our store functionality. Start by running the following command in your Terminal:

yarn add vuex

Then, as this is another third-party library, we need to add it to the vendor array in the webpack.config.vendor.js file:

vendor: [
  "event-source-polyfill",
  "axios",
  "vue",
  "vue-router",
  "vuex",
  "bootstrap/dist/css/bootstrap.min.css",
  "bootstrap-vue",
  "nprogress/nprogress.css"
]

And because we've made another change to this file, we need to run the following command from the Terminal again:

yarn webpack

With Vuex installed, we now need to configure our application to use it. Create a new store folder in the ClientApp directory, and add a ClientApp/store/index.js file to it. At the top of this file, add the following three lines...