介绍 import Vue 得到& # 39;vue # 39;
import Vuex 得到& # 39;vuex& # 39;//使用vuex模块
Vue.use (Vuex);//声明静态常量为4
const state =, {
count 才能:4
};
const mutations =, {
添加才能(n), {
,,,state.count +=厦门市;
,,},
子才能(状态){
,,,state.count——;
,,}
};
const actions =, {//2才能种书写方式
addplus才能(上下文){,//可以理解为代表了整个的上下文
,,,context.commit(& # 39;添加# 39;,{:10}),
,,},
subplus才能({提交}){
,,,提交(& # 39;子# 39;);
,,}
};//导出一个模块
export default new Vuex.Store ({
状态,才能
突变,才能
,行动
}) & lt; template>
,& lt; div id=癮pp"比;
,,& lt; div id=癮ppaaa"比;
,,,& lt; h2>这是vuex的示例& lt;/h2>
,,,& lt; p>组件内部数{{数}}& lt;/p>
,,,& lt; p>
,,,,,& lt; button @click =,“addplus"祝辞+ & lt;/button>
,,,,,& lt; button @click =,“subplus"祝辞& lt;/button>
,,,& lt;/p>
,,,& lt;/p>
& lt;才能/div>
,& lt;/div>
& lt;/template>
& lt; script>//引入mapGetters
import {mapState, mapMutations、mapGetters mapActions},得到& # 39;vuex& # 39;
export default {
,名字:& # 39;应用# 39;
,数据(){
,,return {
,,,,
,,}
},
,计算:{
,,…mapState ([
,,,,“count"
,,,,),
},
,方法:{
,,…mapActions ([
,,,,,“addplus",
,,,,,“subplus"
,,,,)
,}
}
& lt;/script>
& lt; style>
& lt;/style>
本篇文章给大家分享的是有关如何在vuex中使用行动,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
操作类似于突变,不同在于:
操作提交的是突变,而不是直接变更状态。行动是异步的,突变是同步的。
沿用vuex学习——简介的案例:这里是加10减1
1。在商店。js中代码为:
2。在应用程序。vue中代码如下:
以上就是如何在vuex中使用行动,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
