Full-Stack Web Development with Vue.js and Node

Building OAuth Strategies with passport.js Chapter 7 Summary In this chapter, we covered what OAuth is and how to integrate diff ...

8 Introducing Vuex Vuex is a library that we can use with Vue.js to manage different states in an application. If you are buildi ...

Introducing Vuex Chapter 8 Traditional multi-web page application In traditional multi web page application, when we build a web ...

Introducing Vuex Chapter 8 An introduction to SPAs Contrary to the traditional MPAs, SPAs are designed specifically for web- bas ...

Introducing Vuex Chapter 8 SPA versus MPA SPA and MPA serve different purposes. You may want to use one over the other, dependin ...

Introducing Vuex Chapter 8 Data caching: SPAs cache the data in the local storage. It only makes a single request the first time ...

Introducing Vuex Chapter 8 The preceding diagram is a simple diagram that explains how Vuex works. Initially, everything is stor ...

Introducing Vuex Chapter 8 Creating a simple Vuex application We will start a fresh new application to learn the basics of Vuex. ...

Introducing Vuex Chapter 8 After that, run the following command: $ npm run dev The preceding command will spin up your server a ...

Introducing Vuex Chapter 8 } export const store = new Vuex.Store({ state }) In the preceding code, we set the default state for ...

Introducing Vuex Chapter 8 export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </ ...

Introducing Vuex Chapter 8 The preceding screenshot should print the default value of count in the HelloWorld.vue component. If ...

Introducing Vuex Chapter 8 In the preceding code, we added a method called fetchCount, which returns the current value of count. ...

Introducing Vuex Chapter 8 mutations Let's move on to mutations. mutations are methods that perform modifications to the state o ...

Introducing Vuex Chapter 8 Vue.use(Vuex) const state = { count: 0 } const getters = { fetchCount: state => state.count } cons ...

Introducing Vuex Chapter 8 methods: mapActions([ 'increment', 'decrement' ]) } </script> <!-- Add "scoped" attribute to ...

Introducing Vuex Chapter 8 That's it. Now, if you reload the browser, you should be able to see the following result: The count ...

Introducing Vuex Chapter 8 Let's open the application and run the frontend and backend servers: $ cd movie_rating_app $ npm run ...

Introducing Vuex Chapter 8 Check your package.json file; vuex should be listed on the dependencies: "vue-router": "^3.0.1", "vue ...

Introducing Vuex Chapter 8 This means that the initial state of the application will have an empty movie listing. Now, we need t ...