Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung von vuex+Actions

Detaillierte Erläuterung der Verwendung von vuex+Actions

php中世界最好的语言
php中世界最好的语言Original
2018-04-18 15:31:463090Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von vuex+Actions ausführlich erläutern.

Die Aktion übermittelt eine Mutation, anstatt den Zustand direkt zu ändern. Die Aktion ist asynchron und die Mutation ist synchron.

Verwenden Sie vuex, um zu lernen---EinführungEine Fallstudie: Hier wird 10 addiert und 1 subtrahiert

1. Der Code in store.js lautet:

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. In App.vue lautet der Code wie folgt:

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

hammer.js implementiert die Bildgestenverstärkungsfunktion auf der mobilen Seite

Verwendung von js editor- Abonnentenmodus Ausführliche Erklärung

Wie kann man js in die Seite einführen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von vuex+Actions. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn