Vue Component Flashcards
Vue Components
- Meant to be reusable parts
- Components that are meant to be reusable parts are called Components
- Components that represent a full page are called Views
Views contain components
Single Responsibility Principle
A computer-programming principle that states that every module or class should have responsibility for a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class, module, or function.
VueX
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.
VueX Store
VueX adds a shared state “store” that will be used by all components in our application.
VueX Store Part
- State
- Getters
- Mutations
- Actions
- Modules
VueX Store - Getters
Vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
VueX Store - Mutations
The value of properties in the state should never be changed directly. Instead, they should be changed by committing mutations. A mutation is similar to a setter in a Java class but adds additional functionality.
VueX Store - Actions
Actions work similarly to methods that can be called ( dispatched ) to change state or perform other functionality.
An Action contains business logic and does not necessarily care about the state. However, it can change the state using a mutation.
For example, an Action may load data by calling an API before committing a mutation.
VueX Store - Modules
Modules allow for groups of states, mutations, actions, and getters to be encapsulated together similar to a class. This allows for each module to have responsibility for one segment of the VueX state store.
