Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von vuex+Actions
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!