Hello everyone, today let’s learn about knowledge about vuex in vue.js. The content of the article will include the following
- What is Vuex?
- The basic concepts of vuex
- Note when using Vuex
What is Vuex?
- VueX is a library that helps manage the status of components in VueJS, this is a centralized storage for all components in an application, with the state principle can only be changed in a predictable manner. .
- Vuex is also considered as a library to manage state for Vue applications by using global store.
- Vue operates under the “One-way data flow” model with the following components:
State: The state, where the application originated.
View: The view, which is the mapping mappings with status.
Actions: Actions, which are ways that a state of change responds to a user’s input from a View
However, this model breaks down when we have a lot of components sharing the same state: Many views depend on a certain state. Actions from different views need to change with the same state data. Vuex sees why not taking the shared statuses of components and managing them in a global machine, and that’s the reason for the birth of Vuex.
The basic concepts of vuex
State (state)
Can Vuex make it easier for you to define states and create status snapshots? This is because it uses only a single state tree to contain all the state of the application. Using a single state like this will help us synchronize data between componets quickly and accurately.
1 2 3 4 | const state = { count: 0 } |
Retrieving the value of a state variable is the same as getting the value of an attribute in an object.
1 2 3 4 5 6 7 8 | export default { computed: { result() { return this.$store.state.result; } } }; |
Getters (status filtering)
What makes the difference between Vuex and Redux is that we can adjust the data before returning the state. Sometimes we need to get states based on calculations, filter out states provided by the repository, for example:
1 2 3 4 5 6 7 8 9 | const state = { getEvenNumbers: state => { return state.numbers.filter(item => item%2 === 0) } hasNumber : state => num => { return state.numbers.include(num) } } |
If you want to use the component, you can call this.$store.getters.getEvenNumbers directly this.$store.getters.getEvenNumbers or use mapGetter
Mutations
According to Docs, mutations are the only way we can really change the state in the store. And the way to trigger a mutations is to commit a String that is the name of the function we want to call in the mutations, which will take the store state as the first parameter:
1 2 3 4 5 6 7 8 9 10 11 | const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { state.count++ } } }) |
store.commit('increment')
Actions
Action is similar to mutation, however there are some differences. Instead of state changes, the commit actions change, it may contain asynchronous operations. This is where the logical bussiness is displayed, called the API, saved to the database, made commits (called mutations) to change the state …
Example: Add a number, if that number already exists in the state then delete and then add again.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const actions = { updateNum({commit, state}, num){ if (state.includes(num)) { commit('remove', num) } commit('add', num) } foo ({dispatch}, num) { dispatch('updateNum', num) } } |
Module
Vuex uses a single state tree, all the state of the application is put into an object, so as the application grows, the store can grow a lot. Vuex allows to break down the store into smaller modules, each module also has state, mutation, action, getter and even allows nested modules.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> `moduleA`'s state store.state.b // -> `moduleB`'s state |
Note when using Vuex
The most important thing when you use Vuex is to determine which state will store in the store, which is only the local state within the component. You can put it all in the store, but until the scale of the application gets bigger, the store will also grow, which makes it difficult to manage the state.
Conclude
The above are the basics of Vuex. You can find out more on the Vuex homepage here
Some photos and references: https://vuex.vuejs.org/