Introduction to the use of store in vuex (with examples)

This article brings you an introduction to the use of store in vuex (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Introduction to state management (vuex)
​ ​ vuex is a state management model developed specifically for vue.js applications. It uses centralized storage to manage the status of all components of the application, and uses corresponding rules to ensure that the status changes in a predictable way. Vuex also integrates Vue's official debugging tool devtools extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, etc.

2. State management core
State management has 5 cores, namely state, getter, mutation, action and module. Let’s briefly introduce them respectively:
1, state
State is a single state tree. In state, we need to define the arrays, objects, strings, etc. that we need to manage. Only if they are defined here, can the state of the object you defined be obtained in the vue.js component.
2, getter
Getter is somewhat similar to the computed properties of vue.js. When we need to derive some state from the store's state, then we need to use getter. Getter will receive state as the first parameter, and the return value of getter will be based on its dependencies. It is cached and will only be recalculated when the dependency value in the getter (a value in the state that needs to be derived) changes.
3、mutation
The only way to change the state in the store is to submit a mutation, which is very similar to an event. Each mutation has a string type event type and a callback function. If we need to change the value of state, we must change it in the callback function. If we want to execute this callback function, we need to execute a corresponding calling method: store.commit.
4、action
Action can submit mutations, store.commit can be executed in action, and there can be any asynchronous operation in action. If we want to use this action on the page, we need to execute store.dispatch
5, module
Module actually only solves the problem when the state is very complex and bloated. Module can divide the store into modules, and each module has its own state, mutation, action and getter.

3. Example
1. First create a store.js, and then introduce vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

Such a simple store.js is complete.
How do we use this established state management in the interface?

1. Set (update) data

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

Where the data needs to be updated, place The data is updated

this.updateUserInfo(data)

2. Get the data

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

Get the data where needed in created || mounted || methods

Note: Also Data can be set && obtained on the same page

import { mapMutations, mapState } from 'vuex'

Related recommendations:

Learn simple vuex and modularization

Vue.js-vuex (state management)

The above is the detailed content of Introduction to the use of store in vuex (with examples). For more information, please follow other related articles on the PHP Chinese website!