Skip to content

[Vue.js / Vuex] Upgrade tutorial to the framework latest version

Notifications You must be signed in to change notification settings

iurii-kyrylenko/vuex-notes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vuex-notes

Updaing vuex tutorial Learn Vuex by Building a Notes App to vue 2.1.0 and vuex 2.1.3

What has been done

  • Scaffolded the project with the vue-cli using the webpack-simple template.

  • Installed bootstrap and loaders to resolve referenced fonts/icons. Installed babel's stage-2 preset to allow object spread operator:

npm install --save bootstrap
npm install --save-dev file-loader url-loader babel-preset-stage-2
  • Bundled bootsrap.css into 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 $remove anymore. So, instead of

state.notes.$remove(state.activeNote)

the filter method was used:

state.notes = state.notes.filter(note => note != state.activeNote)
  • All mutations, actions and getters declared locally in the store.js and referenced in the Vuex.Store instance. Used vuex API mapActions and mapGetters to map store actions/getters to the components properties.

  • Fixed incorrect behavior in case when note list is empty and active note doesn't exist.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

About

[Vue.js / Vuex] Upgrade tutorial to the framework latest version

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published