vuex學(xué)習(xí)之Actions的用法詳解

更新時(shí)間：2017年08月29日 09:46:24 作者：風(fēng)起了--

本篇文章主要介紹了vuex學(xué)習(xí)之Actions的用法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Action 類(lèi)似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài). Action 是異步的，mutation是同步的。

沿用vuex學(xué)習(xí)---簡(jiǎn)介的案例：這里是加10 減1

1.在store.js 中代碼為：

import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex模塊
Vue.use(Vuex);

//聲明靜態(tài)常量為4
const state = {
  count : 4
};

const mutations = {
  add(state,n){
    state.count +=n.a;
  },
  sub(state){
    state.count--;
  }
};

const actions = {
  //2種書(shū)寫(xiě)方式
  addplus(context){ //可以理解為代表了整個(gè)的context
    context.commit('add',{a:10}) 
  },
  subplus({commit}){
    commit('sub');
  }
};

//導(dǎo)出一個(gè)模塊
export default new Vuex.Store({
  state,
  mutations,
  actions
})

2.在App.vue中代碼如下：

<template>
 <div id="app">
   <div id="appaaa">
    <h1>這是vuex的示例</h1>

    <p>組件內(nèi)部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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuex
Actions

相關(guān)文章

Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過(guò)使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況，感興趣的可以了解一下
2021-06-06
Vue中的事件綁定與解綁方式
這篇文章主要介紹了Vue中的事件綁定與解綁方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果(大屏數(shù)據(jù)輪播場(chǎng)景)
vue3-scroll-seamless 是一個(gè)用于 Vue 3 的插件,用于實(shí)現(xiàn)無(wú)縫滾動(dòng)的組件,它可以讓內(nèi)容在水平或垂直方向上無(wú)縫滾動(dòng),適用于展示輪播圖、新聞滾動(dòng)、圖片展示等場(chǎng)景,本文就給大家介紹了vue3實(shí)現(xiàn)無(wú)縫滾動(dòng)列表效果,需要的朋友可以參考下
2024-07-07
Vue+canvas實(shí)現(xiàn)水印功能
實(shí)際項(xiàng)目中偶爾會(huì)遇到給項(xiàng)目頁(yè)面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對(duì)大家有所幫助
2023-07-07
vue中前端代理跨域問(wèn)題實(shí)例總結(jié)
前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法
這篇文章主要給大家介紹了關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
vue項(xiàng)目打包后打開(kāi)頁(yè)面空白解決辦法
這篇文章主要介紹了vue項(xiàng)目打包后打開(kāi)空白解決辦法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
vue混入mixin流程與優(yōu)缺點(diǎn)詳解
混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
2022-09-09
Vue函數(shù)式組件-你值得擁有
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點(diǎn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過(guò)示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧
2022-03-03