Updaing vuex tutorial Learn Vuex by Building a Notes App to
vue 2.1.0andvuex 2.1.3
-
Scaffolded the project with the vue-cli using the
webpack-simpletemplate. -
Installed bootstrap and loaders to resolve referenced fonts/icons. Installed babel's
stage-2 presetto allowobject spread operator:
npm install --save bootstrap
npm install --save-dev file-loader url-loader babel-preset-stage-2- Bundled
bootsrap.cssinto resulting build, instead of direct CDN link. See also commented section in webpack.config.js.
// App.vue
<style src="bootstrap/dist/css/bootstrap.css"></style>-
Mounted the vue instance to the
<div>tag, instead of<body>. -
Vue 2 does not support
$removeanymore. So, instead of
state.notes.$remove(state.activeNote)the filter method was used:
state.notes = state.notes.filter(note => note != state.activeNote)-
All
mutations,actionsandgettersdeclared locally in the store.js and referenced in theVuex.Storeinstance. Used vuex APImapActionsandmapGettersto map store actions/getters to the components properties. -
Fixed incorrect behavior in case when note list is empty and active note doesn't exist.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run buildFor detailed explanation on how things work, consult the docs for vue-loader.