Explication détaillée de l'utilisation de vuex+Actions

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de vuex+Actions. Quelles sont les précautions lors de l'utilisation de vuex+Actions. Voici un cas pratique, jetons un coup d'œil.

L'action soumet une mutation au lieu de changer directement l'état. L'action est asynchrone et la mutation est synchrone.

Suivez l'exemple de l'apprentissage avec vuex ---Introduction : Voici ajouter 10 et soustraire 1

1. Le code dans store.js est :

import Vue from'vue'
import Vuex from'vuex'
//使用vuex模块
Vue.use(Vuex);
//声明静态常量为4
const state = {
  count : 4
};
const mutations = {
  add(state,n){
    state.count +=n.a;
  },
  sub(state){
    state.count--;
  }
};
const actions = {
  //2种书写方式
  addplus(context){//可以理解为代表了整个的context
    context.commit('add',{a:10})
  },
  subplus({commit}){
    commit('sub');
  }
};
//导出一个模块
exportdefaultnewVuex.Store({
  state,
  mutations,
  actions
})

2. Dans App.vue, le code est le suivant :

<template>
 <p id="app">
   <p id="appaaa">
    <h1>这是vuex的示例</h1>
 
    <p>组件内部count{{count}}</p>
    <p>
      <button @click ="addplus">+</button>
      <button @click ="subplus">-</button>
    </p>
    </p>
 
  </p>
 </p>
</template>
 
<script>
//引入mapGetters
import {mapState,mapMutations,mapGetters,mapActions} from'vuex'
exportdefault{
 name:'app',
 data(){
   return{    
   }
 },
 computed:{
   ...mapState([
     "count"
     ]),
 },
 methods:{
   ...mapActions([
      "addplus",
      "subplus"
     ])
 }
}
</script>
<style>
</style>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

hammer.js implémente la fonction d'amplification des gestes d'image côté mobile

Utilisation de js editor- mode abonné Explication détaillée

Quels sont les moyens d'introduire js dans la page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!