Steps to use vuex

1. Purpose of using Vuex

Realize multi-component state management. Vuex is a good helper when data sharing is needed among multiple components

2. The five cores of Vuex

Among them, state and mutation are necessary, and others can be added according to requirements

1.state

Responsible for state management, similar to data in vue, for initializing data

2.mutation

Dedicated to modifying data in state, triggered by commit

3.action

dispatch can be used for asynchronous processing. state cannot be modified directly. First, action is triggered by dispatch in the component, then mutation is triggered by commit in the action function, and state state value is modified by mutation

4.getter

The calculation attribute in Vuex is equivalent to computed in vue, and depends on the state value of state. If the state value changes once, getter will be recalculated, that is to say, when one data changes depending on another data, getter will be used

5.module

Modular management

3. How to use Vuex

1. First of all, of course (assuming you have vue installed)

npm install vuex

2. Introducing and using Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. Instantiate an Vuex object-the Store state machine and throw

const store = new Vuex.Store({})

export defaul store 

4. Introducing and injecting Vuex into main. js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
 render: h => h(App),
 store
}).$mount('#app') 

5. Access Vuex data through this. $store

At this point, Vuex is ready to be completed, and then add data according to your own needs ~

4. Sample code

1. Prepare at least two components first, otherwise how can data be shared

<template>
 <div>
  I am a component 1
 </div>
</template>

<script> export default {
 
} </script>
<style scoped>
</style> 

<template>
 <div>
  I am a component 2
 </div>
</template>

<script> export default {
 
} </script>
<style scoped>
</style> 

2. Write Vuex related codes in store. js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {},  // State management 
 mutations: {}, // Modify state
 actions: {}, // Asynchronous operation 
 getters:{},  // Calculate attributes 
 modules: {}  // Module 
})
export default store 

Note: Don't forget to inject store into main. js (refer to dot 4 of dot 3 above)

3. Suppose we now need to share a data data with an initial value of 0

 Exactly 
const store = new Vuex.Store({
 state: {
  data:0
 }  
})
 Exactly  

4. data is available for both Component 1 and Component 2 via $store

 <div>
  I am a component 1
 {{this.$store.state.data}} // Displays here in the browser data Value of 
 </div> 

 <div>
  I am a component 2
 {{this.$store.state.data}} // Displays here in the browser data Value of 
 </div> 

5. So how to modify data? At this time, mutation is needed

mutation is essentially a function that receives state and the params parameter that is passed when it is called

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

0

6. When mutation is available, you need to call it in the component next. Remember to trigger it with commit

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

1

7. How to use 7. action?

action is also a function. As mentioned earlier, action cannot directly modify state. First, action should be triggered by dispatch in the component, then mutation should be triggered by commit inside action function, and state state value should be modified by mutation. Note the parameters of action

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2

At this time, action can be triggered in the component, pay attention to using dispatch

<template>
 <div>
  I am a component 2
 <button @click='changeData'> Change data </button>
 </div>
</template>
<script> export default {
 data(){
  return {
   changeData(){
    //  Pass dispatch  Trigger  action  Parallel transmission of reference 
    this.$store.dispatch('changeDataAct',100)// At this time data It becomes 100 La, and components 1 And components 2 Is synchronized 
   }
  }
 }
} </script> 

8. Usage of getter

getter computation attribute, depending on state value, requires return Now let's suppose a value double, which is twice as large as data and varies with data

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

4 We can use it in the component

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

5

The above is the vuex use of the steps in detail, more information about the use of vuex please pay attention to other related articles on this site!