Action 類似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接變更狀態. Action 是異步的,mutation是同步的。
沿用vuex學習---簡介的案例:這里是加10 減1
1.在store.js 中 代碼為:
import Vue from 'vue'import Vuex from 'vuex'//使用vuex模塊Vue.use(Vuex);//聲明靜態常量為4const 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');  }};//導出一個模塊export default new Vuex.Store({  state,  mutations,  actions})2.在App.vue中 代碼如下:
<template> <div id="app">   <div id="appaaa">    <h1>這是vuex的示例</h1>    <p>組件內部count{{count}}</p>    <p>      <button @click = "addplus">+</button>      <button @click = "subplus">-</button>    </p>    </p>  </div> </div></template><script>//引入mapGetters import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'export default { name:'app', data(){   return {        } }, computed:{   ...mapState([     "count"     ]), }, methods:{   ...mapActions([      "addplus",      "subplus"     ]) }}</script><style></style>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答