VUEX

1. What is Vuex?

1.1. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

1.2. Library for Vue JS

1.3. Inspired by

1.3.1. Flux

1.3.2. Redux

1.3.3. The Elm Architecture

2. What is State Management Pattern?

2.1. It is a self-contained app with the following parts:

2.1.1. State

2.1.2. View

2.1.3. Action

2.2. One way data flow is the simplest representation of this pattern.

2.3. this simplicity quickly breaks down when we have multiple components that share a common state:

2.4. What is the solution?

2.4.1. extract the shared state out of the components, and manage it in a global singleton

2.5. What will be the benefits?

2.5.1. more Structure

2.5.2. maintainability

2.5.3. view becomes big

2.5.3.1. but all the components can access the state or trigger action

3. When should I use it?

3.1. When you are building a medium-to-large-scale SPA

4. Core Concepts

4.1. Store

4.1.1. A "store" is basically a container that holds your application state.

4.1.2. Center of every Vuex application

4.1.3. It is similar to a plain global object. Although it is more in these points.

4.1.3.1. Vuex stores are reactive

4.1.3.1.1. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.

4.1.3.2. You cannot directly mutate the store's state.

4.1.3.2.1. The only way to change a store's state is by explicitly committing mutations.

4.1.3.2.2. This ensures every state change leaves a track-able record

4.2. State

4.2.1. Vuex State Uses Single State Tree

4.2.1.1. Usually you will have only one store for each application

4.2.1.2. Tree makes it straightforward to locate a specific piece of state

4.2.1.3. Allows us to easily take snapshots of the current app state for debugging purposes

4.2.1.4. The data you store in Vuex follows the same rules as the data in a Vue instance, ie the state object must be plain.

4.2.2. Get State To a Component

4.2.2.1. We can retrive the State In Vue's Computed Section

4.3. Getters

4.3.1. When we need derived and computed state based on store state

4.3.2. They are like computed properties in VueJS.

4.4. Mutations

4.4.1. Mutation handler functions must be synchronous

4.4.2. This is the only way to actually change state in a Vuex store

4.4.3. We can do this by committing a mutation

4.4.3.1. We can commit this way

4.4.4. Vuex mutations are very similar to events

4.4.5. Consists

4.4.5.1. Handler function

4.4.5.2. State as param of the function

4.4.5.3. It can have the payload as the second param

4.4.5.4. We make changes on the states in the Handler

4.4.6. Constant Name For Mutations

4.4.6.1. This allows the code to take advantage of tooling like linters

4.5. Actions

4.5.1. Are similar to mutations

4.5.2. But they are for asynchronous operations

4.5.3. Action handlers receive a context

4.5.3.1. Through the {context} property you access

4.5.3.1.1. context.commit

4.5.3.1.2. context.state

4.5.3.1.3. context.getters

4.5.3.1.4. context.dispatch

4.6. Modules

4.6.1. Single State Stree Store all information in one big Object

4.6.2. To avoid code bloat, we can use modules to separate our code

4.6.3. Vuex allows us to separate our code into Modules

4.6.3.1. Each Module can have

4.6.3.1.1. States

4.6.3.1.2. Mutations

4.6.3.1.3. Actions

4.6.3.1.4. Getters

4.6.4. Namespacing

4.6.4.1. By default, actions and mutations are still registered under the global namespace

4.6.4.2. Setting the namespaced parameter true

4.6.4.2.1. getters, actions and mutations will be automatically namespaced based on the path the module is registered at.