What is Vuex?
VueX is a state management tool suitable for use in Vue project development. Imagine a project that frequently uses component arguments to synchronize values in data. Managing and maintaining those values can be tricky once the project becomes large. To this end, Vue provides a unified management tool — VueX — for these values that are frequently used by multiple components. In a Vue project with VueX, we just need to define these values in the VueX to be used in the components of the entire Vue project.
The installation
Vue Cli scaffolding is used by default
npm i vuex
Copy the code
Use Vuex in your project
│ App. Vue │ main. Js │ ├ ─ assets │ vue. PNG │ ├ ─ components │ HelloWorld. Vue │ ├ ─ the router │ index. The js │ └ ─ store index, jsCopy the code
use
// store/index.jjs
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// Store status
state: {},
// Member operations
mutations: {},
// Asynchronous operation
actions: {},
// Process the state member to the outside world
getters: {},// Modular state management
modules: {}})Copy the code
Vuex workflow
First of all, we should know that the data in Vuex are all responsive. The component can directly modify the data in state by submitting the method in Mutations. Once the data in state is modified by Render, the rendering will be rewritten, and the component page will be updated
If the operation has an asynchronous operation, it needs to be dispatched to Actons for processing, and then submitted to Mutations
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
// Global event bus
Vue.$bus = Vue.prototype.$bus = eventBus
new Vue({
store,
render: h= > h(App)
}).$mount('#app')
Copy the code
state
state/index.js
export default {
/ / data
msg:"Hello World".language: ["Java"."JavaScript"."Pythone"."Go"."TypeScript"].now:"2021-10-30"
}
Copy the code
actions
Because you operate asynchronously directly in the mutation method, you will cause data invalidation. So Actions are provided specifically for asynchronous operations, and the mutation method is eventually submitted.
Methods in Actions have two default arguments
context
Context (equivalent to this in the arrow function) objectpayload
Mount parameters
state/actions.js
// Complete the asynchronous operation in actions, and then submit it to Mutations
export default {
// context context
// Payload Payload information
CHANGE_MSG(context,payload){
Asynchrony can be handled in actions
setTimeout(() = >{
context.commit(CHANGE_MSG,payload)
},2000)},EDIT_LANGUAGGE({commit},payload){
// Perform the conditional judgment at commit
if(payload){
commit(CHANGE_MSG,payload)
}
}
}
Copy the code
mutions
Mutations methods have default parameters :([state] [,payload])
state
Is the currentVueX
The object of thestate
payload
Is used by the method to pass arguments when called
state/mutions.js
// mutions is where the state data is actually modified
export default {
// state Maintains data
// Payload Payload information
CHANGE_MSG(state,payload){
// Some logic for changing state
},
EDIT_LANGUAGGE(state,payload){
// Some logic for changing state}}Copy the code
getters
Members in state can be processed and passed to the outside world
Methods in Getters take two default arguments
state
The state object in the current VueX objectgetters
The current getters object used to take other getters under getters
state/getters.js
// It can be interpreted as a calculation property that further processes the data back to the user without affecting the source data
export default {
// Use getters to process data
GET_INDEXOF_JAVA: state= > {
return state.language.filter(a= >a.indexOf("Java")! = -1)}Copy the code
modules
When a project is large and has many states, modular management can be adopted. Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom.
// state/Modules.js
export default {
foo: {// Enable the namespace
namespaced: true
},
bar:{}
}
Copy the code
A binding function with a namespace
MapState, mapGetters, mapActions, and mapMutations
<template>
<div>Hello World</div>
</template>
<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
export default {
name: 'Test'.computed: {
// when the namespace is enabled. mapState('namespaced'['foo.xxx']),
// Namespace usage is not enabled. mapState('namespaced/foo.xxx')
/ /... The other three map functions are similar
// Understand the difference between {} and []
// more...
},
methods: {},
data () {}
}
</script>
<style></style>
Copy the code
Recommended article: Official Vuex state Management document