Summary of Vue basics 14: what does vuex do?

One 、 Official explanation

Vuex Is a special for Vue.js State management mode of application development .
It uses Centralized storage management The state of all components of the application , And the corresponding rules ensure that the state changes in a predictable way .

Two 、Vuex Legend of state management

3、 ... and 、VueX Core concept of

1. State
2. Getters
3. Mutation
4. Action
5. Module

Four 、getters

from store Get some state The state of being mutated .

export default  {
    
  powerCounter(state) {
    
    return state.counter * state.counter
  },
  more20stu(state) {
    
    return state.students.filter(s => s.age > 20)
  },
  more20stuLength(state, getters) {
    
    return getters.more20stu.length
  },
  moreAgeStu(state) {
    
    return age => {
    
      return state.students.filter(s => s.age > age)
    }
  }
}

5、 ... and 、Mutation

Vuex Of store The only way to update the status ： Submit Mutation

Mutation It mainly consists of two parts ：

1. The event type of the string ;
2. A callback function （handler）, The first parameter of the callback function is state;
   Mutation How to define ：

  mutations: {
    
    increment(state) {
    
      state.count++
    }
  },

adopt Mutation to update ：

	increment：function() {
    
      this.$store.commit('increment')
    }

Through Mutation When updating data , Possible parameters , The parameter is called Mutation The load of （Payload）.

increment(state, x){
    
	state.count += x;
}

increment: function(){
    
	this.$store.commit('increment', x)
}

What if it's multiple objects ？

Then it can be passed as an object .

6、 ... and 、Action

Instead of Mutation Do asynchronous operations .

actions: {
    
    increment(context) {
    
      setTimeout(() => {
    
        context.commit('increment')
      }, 1000)
    }
  }

context What is it? ？

context Is and store Objects that have the same methods and properties , That is to say, it can pass through context Conduct commit, Also available context.state.

stay Vue In the component , If we call action The method in , Then we need to use dispatch Method .

actions: {
    
    increment(context) {
    
      setTimeout(() => {
    
        this.$store.dispatch('increment')
      }, 1000)
    }
  }

action Back to Promise.

stay Action in , We can put asynchronous operations in one Promise in , And after success or failure , Call corresponding resolve or reject.

actions: {
    
    increment(context) {
    
        return new Promise((resolve => {
    
			setTimeout(() => {
    
		        context.commit('increment')
		      }, 1000)	
		}))
    }
  }

methods: {
    
    increment() {
    
        this.$store.dispatch('increment').then(res => {
    
			console.log(' Official account 【 Nezha programming 】, obtain java Development of information ')
		})
    }
  }

7、 ... and 、Module

Vue take store To divide into several module, Each module has its own state、mutations、actions、getters etc. .

Last one ：Vue Basic knowledge summary 13： Build from scratch Vue project

Next ：Vue Why abandon the classic Ajax, Choose new technology Axios？