Introduce a,

Vuex is a mechanism to implement global state (data) management for components. Data sharing between components can be easily realized, which is equivalent to global variables in Java

Benefits of unified state management using Vuex

  1. Centrally manage globally shared data in VUEX for easy development and maintenance

  2. It can efficiently realize data sharing between components and improve development efficiency

  3. The data stored in VUEX is responsive and can be kept in sync with the page

The way data is shared between components in Vue

  • Parent to child: V-bind attribute binding
  • Child to parent: V-ON event binding
  • Sharing data between sibling components: EventBus
  • Unified global data management: Vuex


Second, environment building

Install the vuex dependency package NPM install vuex --save 2. Import the vuex package and install it into the Vue project. Create a new VUex.Store"And expose it/ / store. Js file
import Vue from 'vue'
import Vuex from 'vuex' // Import vuex package

Vue.use(Vuex) // Install into the Vue project

// Create Store object and expose it
export default new Vuex.StoreState: {count:0}},3. During the creation of the Vue, Import vue from 'vue' import App from './ app.vue 'import store from './store' new vue ({ render: h => h(App),// Mount the created shared data object to the Vue instance
  // All components can get global data directly from store
  store
}).$mount('#app')

Copy the code


Three, Vuex four attributes introduction

State data source

State is used to provide shared data sources, and all globally shared data is placed in secondary data

//store.js
const store = new Vuex.Store{// create a store data source that provides unique public data state: {count:0}})// How the component accesses data in State
this.$store.state.count
Copy the code

2, Mutation data changes

Mutation is used to change data in the Store

  1. It is recommended to change Store data only by Mutation. This.$store.state.count++ is not recommended to operate Store data directly
  2. This is a slightly more cumbersome way to operate, but you can listen for all data changes centrally
//store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutation:{
     add(state){
         // Change the state
         state.count++
     },
      // Carry parameters
     addN(state, step){
          state.count +=step
     }
  }
})

// Trigger the methods in mutation
this.$store.commit('add')
// Need to pass the argument writing method
this.$store.commit('addN', 3)
Copy the code

Action Asynchronous data changes

If the data is changed by an asynchronous operation, it must be done through an Action and not directly in Mutation. However, if the data is changed in an Action, it cannot be changed directly, but rather indirectly by calling Mutation

//store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutation:{
     add(state){
         state.count++
     }
  },
  actions:{
       addAsync(context){
           setTimeout(() => {
               context.commit('add')},1000)
       },
       addAsyncN(context, step){
           setTimeout(() => {
               context.commit('add', step)
           }, 1000}}}) // Trigger Action this.$store.dispatch('addAsync'// We need to pass the argument this.$store.dispatch('addAsync'.5)
Copy the code

Getters wrap data

Getters are used to process the data in Store to form new data. They do not modify the data in state. They are only used to wrap the data

  1. Getters can process existing data in the Store to form new data, similar to the calculation properties of Vue
  2. When the data in the Stroe changes, the data in the Getter changes as well
//store.js
const store = new Vuex.Store({
  state: {
    count: 0}, getters: {showNum: state => {return 'current number is' + state.count}}})/ / use GettersMethods :{handle(){// Trigger action this.$store.getters.showNum
   }
}
Copy the code


Four, knowledge summary

  1. Vuex introduction

  2. Concrete practical steps of Vuex’s simple practical Store 3′

  3. Vuex introduces the core concept of state and the use of mutation, the use of Action and the use of getter


Five, the study

  • Video: www.bilibili.com/video/BV1h7…