vuex

1. What is Vuex

State management mode developed specifically for vue.js applications. Used to centrally manage common data in a project

2. Five elements of VUex

2.1 the State

2.1.1 Functions of State

Save public data, and state is reactive

2.1.2 Defining data

state:{
  // Attribute name: attribute value
  name:'joker'.company:'ATLUS'
  }
Copy the code

2.1.3 Usage data

this$store.state. Attribute name or {{$store.state. The property name}}Copy the code

Mutations

2.2.1 mutations role

Call mutations to modify the public data defined in state

2.2.2 Registration format

Mutations: {mutation name:function(State [, parameter]{}}Copy the code

The first argument represents the current state and the second, optional, represents the payload (the data to be passed in when the function is executed)

2.2.3 Submission format

this.$state.commit('mutation of'To load)Copy the code

2.2.4 note

Is the only entry in Vuex to modify public data

2.3 Getters

2.3.1 getters role

Similar to the computed

2.3.2 Defining the format

Getters name:function(state){
  returnThe return value}Copy the code

2.3.3 Using format

$store. Getters. Getter nameCopy the code

2.4 the Action

Against 2.4.1 actions role

Sending an asynchronous request

2.4.2 Defining the format

Actions :{action name:function(The context, the load){
  // make an asynchronous request for data
  //commit calls mutation to modify/save the data
  context.commit('mutation of', load)}}Copy the code

The context object is passed in automatically

2.4.3 Call Format

this.$store.dispatch('the action name'To load)Copy the code

2.4.4 Advantages of Ajax in Actions

1. Code is further encapsulated, ajax and VUex binding 2. Logic is smoother

2.5 Modules

2.5.1 modules function

Break up the template

2.5.2 format

Modules: {modules: {namespace:true.state: {},... }}Copy the code

2.5.3 How Can I Access Data After a Vm Template Is Split

Access to the state/getters

State {{$store.state. Module name. Getters {{$store. Getters [$store.'Module name /getter name']}}
Copy the code

Access to the mutations/actions

//namespace=false
$store.commit('mutaions name')
namespace=true
$store.commit('module name /mutation name')
Copy the code

2.5.4 Structural optimization

3 Vuex auxiliary function Map

3.1 the State

computed:{
  / / global. mapState('[xxx]') or ... mapState({'New name':'xxx'})
  //modules. mapState('Module name'.'[xxx]') or ... mapState('Module name', {'New name'.'xxx'})}Copy the code

3.2 Mutaions

methods:{
  / / global. mapMutations(['mutation of']) or ... mapMutations({'New name'.'mutation of'})
  //modules. mapMutations('Module name'['mutation of']) or ... mapMutations('Module name', {'New name'.'mutation of'})}Copy the code

3.3 Getters

computed:{
  / / global. mapGetters('[xxx]') or ... mapGetters({'New name':'xxx'})
  //modules. mapGetters('Module name'.'[xxx]') or ... mapGetters('Module name', {'New name'.'xxx'})}Copy the code

3.4 the Actions

methods:{
  / / global. mapActions(['the action name']) or ... mapActions({'New name'.'the action name'})
  //modules. mapActions('Module name'['the action name']) or ... mapActions('Module name', {'New name'.'the action name'})}Copy the code

Vuex