首先要安装插件:vue.js devtools
首先看项目目录:
项目通过vue创建,添加的vue-router和vuex两个插件。
通过三步骤展示:Vuex为什么要使用actions
下面是差异化操作步骤:
为什么要使用actions-差异化展示第1步:在index.js里面添加方法,模拟异步
为什么要使用actions-差异化展示第2步:在About.vue里面添加异步按钮
为什么要使用actions-差异化展示第3步:在About.vue里面设置异步方法
为什么要使用actions-差异化展示第1步:在index.js里面添加方法,模拟异步
store/index.js代码:
// store/index.js内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0 //1.在index.js里面设置count.
},
getters: {
},
mutations: { //7.在/store/index.js里面设置修改状态。
increment(state){
state.count++
},
decrement(state){
state.count--
},
incrementAsync(state){ //为什么要使用actions-差异化展示第1步:在index.js里面添加方法,模拟异步
setTimeout(()=>{
state.count++;
},1000);
}
},
actions: { //6.在/store/index.js里面设置Increment和decrement方法。
increment({commit}){
commit('increment')
},
decrement({commit}){
commit('decrement')
}
},
modules: {
}
})
//vuex的基本使用8步骤——等同于购物车里面的数量增减:
//1.在index.js里面设置count。
//2.在About.vue里面设置count的计算属性。
//3.在About.vue里面设置显示count。
//4.在About.vue里面设置+1和-1按钮。
//5.在About.vue里面设置声明increment和decrement方法。
//6.在/store/index.js里面设置Increment和decrement方法。
//7.在/store/index.js里面设置修改状态。
//8.在App.vue上设置使用。
//为什么要使用actions-差异化展示第1步:在index.js里面添加方法,模拟异步
//为什么要使用actions-差异化展示第2步:在About.vue里面添加异步按钮
//为什么要使用actions-差异化展示第3步:在About.vue里面设置异步方法
为什么要使用actions-差异化展示第2步:在About.vue里面添加异步按钮
为什么要使用actions-差异化展示第3步:在About.vue里面设置异步方法
About.vue代码:
// About.vue内容
<template>
<div class="about">
<h1>This is an about page</h1>
{{count}} <!-- //3.在About.vue里面设置显示count。 -->
<button @click="increment">+1</button> <!-- //4.在About.vue里面设置+1和-1按钮。 -->
<button @click="decrement">-1</button>
<button @click="incrementAsync">+1异步</button> <!-- //为什么要使用actions-差异化展示第2步:在About.vue里面添加异步按钮 -->
</div>
</template>
<script>
export default{
computed:{ //2.在About.vue里面设置count的计算属性。
count(){
return this.$store.state.count;
}
},
methods:{ //5.在About.vue里面设置声明increment和decrement方法。
increment(){
this.$store.commit('increment');
},
decrement(){
this.$store.commit('decrement');
},
incrementAsync(){ //为什么要使用actions-差异化展示第3步:在About.vue里面设置异步方法
this.$store.commit('incrementAsync');
}
}
}
</script>
运行结果可以看出,异步+1,监听到的结果count始终比前端展示的少1.
上面的代码经过简单的修改即可实现监控的count值,在+1异步时实现同步的效果:
只需要在store/index.js里面做简单的修改:
// store/index.js内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
getters: {
},
mutations: {
increment(state){
state.count++
},
decrement(state){
state.count--
},
// incrementAsync(state){
// setTimeout(()=>{
// state.count++;
// },1000);
// }
incrementAsync(state){ //为什么要使用actions-同步化第1步:
state.count++;
}
},
actions: {
increment({commit}){
commit('increment')
},
decrement({commit}){
commit('decrement')
},
incrementAsync({commit}){ //为什么要使用actions-同步化第2步:
setTimeout(()=>{
commit('incrementAsync');
},1000);
}
},
modules: {
}
})
//只需要两步修改即可实现同步:
//为什么要使用actions-同步化第1步:
//为什么要使用actions-同步化第2步
运行结果如下: