A, vuex use

A, Vuex presentation (mutations synchronization method)

Const state variables defined by the way, is a reference in the wording of new Vuex.Store

1、main.js

// Sotre variables shared variables for all components, i.e., the global variables 

Import from Vue 'VUE'; // reference VUE 
Import from Vuex 'vuex'; // reference vuex 
Vue.use (Vuex); // use vuex 

// a, formats 
/ * const = Store new new Vuex.Store (); 
Export default Store; * / 

// /////////////////////////// ////////////////////////////////////////////////// ///// 

// 2, exemplary 

// definition data 
// state in vuex is used to store data 
const state = { 
    name: 100 
} 

// defined mutation synchronization method, because the method is to change the state of the mutations 
/ /mutations which party is a method, used mainly to change the data source state 
const mutations = { 
    addNumber () { 
        state.name + = 100 
    }, 
    reduceNumber () { 
        state.name + = 100 
    }, 
}, 

// definition method asynchronous actions be used: asynchronous operation such as a data request, needs to be put in action 

// instantiate Vuex.store, what primers to use, on the introduction of actions used actions, getters on the introduction of getters used, it is used herein only two 
const = Store new new Vuex.Store ({ 
    state, 
    mutations 
}) 

Export default Store; 

// .. 1, page using this $ store.state to a value obtained in the state. 
// 2 pages use this. $ Store.commit to call a method in the mutations vuex 
//3, pages using this. $ Store.dispatch to call a method in the actions vuex 


// difference between actions and mutation of 

// Action submitting a mutation, rather than directly change state

Page calls

<template>
    <div>{{this.$store.state.name}}
     <button @click="add">增加100</button>
     <button @click="reduce">减少100</button>
   </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      active: 2
    };
  },
  methods: {
      add(){
       this.$store.commit('addNumber')
      },
      reduce(){
       this.$store.commit('reduceNumber')
      },
  }
}
</script>

Second, the presentation (action example asynchronous calls)

store.js file

// Sotre variables shared variables for all components, i.e., the global variables 

Import from Vue 'VUE'; // reference VUE 
Import from Vuex 'vuex'; // reference vuex 
Vue.use (Vuex); // Use vuex 

const Store = new new Vuex.Store ({ 
    State: { 
      COUNT: 0 
    }, 
    mutations: { 
      INCREMENT (State) { 
        state.count ++ 
      } 
    }, 
    Actions: { 
      INCREMENT (context) { 
        context.commit ( 'INCREMENT' ) 
      } 
    } 
  } ) 
  
Export default Store
 
// 1, with pages this. $ Store.state to get to a value in the state. 
// 2 pages use this. $ Store.commit to call a method in the mutations vuex 
// 3 pages use this. $ Store.dispatch to call a method in the actions vuex 


// Actions and the difference between the mutation 

// Action submitting a mutation, rather than directly change state

Page calls

<template>
    <div>{{this.$store.state.count}}
     <button @click="add">增加100</button>
   </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      active: 2
    };
  },
  methods: {
      add(){
         this.$store.dispatch('increment')
      },
  }
}
</script>

Third, the presentation (action an example of an asynchronous call extensions)

1, the expansion callback argument

store.js page

// Sotre variables shared variables for all components, i.e., the global variables 

Import from Vue 'VUE'; // reference VUE 
Import from Vuex 'vuex'; // reference vuex 
Vue.use (Vuex); // Use vuex 

const Store = new new Vuex.Store ({ 
    State: { 
      COUNT: 0 
    }, 
    mutations: { 
      INCREMENT (State) { 
        state.count ++ 
      } 
    }, 
    Actions: { 
      INCREMENT (context, param) { 
        context.commit ( 'INCREMENT' )
         / / Action after the callback 
        IF (param.success) param.success () 
      } 
    } 
  }) 
  
Export default Store 
 
// . 1, page with this. $ Store.state to a value obtained in the state. 
// 2 pages use this. $ Store.commit to call a method in the mutations vuex 
// 3 pages use this. $ Store.dispatch to call a method in the actions vuex 


// Actions and the difference between the mutation 

// Action submitting a mutation, rather than directly change state

Page calls

<template>
    <div>{{this.$store.state.count}}
     <button @click="add">增加100</button>
   </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      active: 2
    };
  },
  methods: {
      add(){
          this.$store.dispatch("increment", {
              success() {
                  alert("incremented!")
              }
          })
      },
  }
}
</script>

 key point

Add a variable payload inside a callback function

2, the callback parameter expansion property along +

store page

// Sotre variables shared variables for all components, i.e., the global variables 

Import from Vue 'VUE'; // reference VUE 
Import from Vuex 'vuex'; // reference vuex 
Vue.use (Vuex); // Use vuex 

const Store = new Vuex.Store ({ 
    State: { 
      COUNT: 0 , 
      List: [] 
    }, 
    mutations: { 
        // State corresponds to the here above this state, param parameter is passed over because it is new // inside a store the parameter is required, 
      INCREMENT (State, param) { 
        state.count ++ ; 
        state.list = param; 
      } 
    }, 
    Actions: { 
      //Store and $ context here we use the method and have the same object, param is passed over the parameter variables (having two attributes) 
      INCREMENT (context, param) { 
        context.commit ( 'INCREMENT' , param.list)
         / / after action callback 
        IF (param.success) param.success () 
      } 
    } 
  }) 
  
Export default Store 
 
// . 1, page using this. $ store.state to a value obtained in the state. 
// 2 pages use this. $ Store.commit to call a method in the mutations vuex 
// 3 pages use this. $ Store.dispatch to call a method in the actions vuex 

// Actions and the difference between the mutation 

// Action submitting a mutation, rather than directly change state

Calling page

<Template> 
    <div> 
      {{ the this . store.state.count $}} 
      {{ the this . store.state.list}} $
        <= the Click @ Button "the Add"> increase 100 </ Button> 
   </ div> 
< / Template> 
<Script> 
Export default { 
  Components: { 
  }, 
  Data () { 
    return { 
      Active: 2 
    }; 
  }, 
  Methods: { 
      the Add () { 
          the this . $ store.dispatch ( "INCREMENT" , {
               // definition of anonymous the variable parameter is increased by two attributes, a list variable, a callback function 
              list: [{name: 'Bai'}, {name: 'Gao Jianli'}, {name:'Gagne''Gagne' }],
              success() {
                    alert("incremented!")
              }
          })
      },
  }
}
</script>

Renderings:

 

 

Note: In fact, above all the parameters (parameter variables inside the anonymous writing callback functions and common variable definitions used together, only the wording)

3, after the extended asynchronous callback request ajax