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