此文要结合前面的几节才能串起来：
第4章 Vue全家桶(vue-router+vuex)- 4.17 vuex的其本使用8步骤
第4章 Vue全家桶(vue-router+vuex)- 4.18 为什么要使用actions
第4章 Vue全家桶(vue-router+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用
第4章 Vue全家桶(vue-router+vuex) - 4.19 Vuex系列的辅助函数的运用——mapState,mapGetters,mapMutations,mapActions
此文所涉及到的代码已展示在下面。
首先查看项目目录：
4.20 如何在组件内部提交数据给vuex共3步骤：
目录
4.20 如何在组件内部提交数据给vuex第1步：方法2等同于方法1在About.vue里面设置方法。
4.20 如何在组件内部提交数据给vuex第2步：在store/index.js里面设置方法。
4.20 如何在组件内部提交数据给vuex第3步：在store/index.js里面设置状态。
第1步：方法2等同于方法1在About.vue里面设置方法。
About.vue代码：
// About.vue内容
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- {{count}} //vuex的基本使用第三步：显示count -->
{{myCount}}--{{user}} <!-- //4.19 Vuex系列的辅助函数的运用——mapState应用第4步:展示count和username -->
{{evenOrOdd}} <!-- //Vuex系列的辅助函数的运用——getter应用第3步:在About.vue里面展示evenOrOdd。 -->
<button @click="increment">+1</button> <!-- //vuex的基本使用第四步：设置+1按钮 -->
<button @click="decrement">-1</button>
<button @click="incrementAsync">+1异步</button> <!-- 为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮 -->
</div>
</template>
<script>
//附助函数仅限用于不提交数据的时候，如果需要提交数据，还是需要使用函数返回值的方法。
import { mapState,mapGetters,mapMutations,mapActions } from "vuex"; //4.19 Vuex系列的辅助函数的运用——mapState应用第2步:导入方法。
export default{
computed: { //vuex的基本使用第二步：设置计算属性的值。
// count() {
// return this.$store.state.count //获取count值。实时监听count的变化。
// },
// username(){
// return this.$store.state.username;
// }
// ...mapState(['count','username']) //两个count一样，两个username一样，才这样使用，下面的方法是函数名和返回的值不一样的方法。
...mapState({ //4.19 Vuex系列的辅助函数的运用——mapState应用第3步:获取count和username
myCount:'count',
user:'username'
}),
// evenOrOdd() {
// return this.$store.getters.evenOrOdd;
// },
...mapGetters(['evenOrOdd']) //Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
},
methods:{ //vuex的基本使用第五步：声明increment方法
incrementAsync(){ //为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法
//在组件内部提交数据 载荷形式分发
// this.$store.dispatch('incrementAsync',{ //4.20 如何在组件内部提交数据给vuex第1步：方法1在About.vue里面设置方法。
// amount:10
// });
this.$store.dispatch({ //4.20 如何在组件内部提交数据给vuex第1步：方法2等同于方法1
type:'incrementAsync',
amount:10
});
},
// ...mapActions(['incrementAsync']), //Vuex系列的辅助函数的运用——mapActions 方法，
// increment(){
// //dispatch触发actions中声明的方法
// // this.$store.dispatch('increment');
// this.$store.commit('increment');
// },
// decrement(){
// // this.$store.dispatch('decrement');
// this.$store.commit('decrement');
// }
...mapMutations(['increment','decrement']) //Vuex系列的辅助函数的运用——mapMutations 方法
}
}
</script>
4.20 如何在组件内部提交数据给vuex第2步：在store/index.js里面设置方法。
4.20 如何在组件内部提交数据给vuex第3步：在store/index.js里面设置状态。
index.js代码：
// store/index.js内容
import Vue from 'vue'
//1.导入模块
import Vuex from 'vuex'
//2.使用当前的插件
Vue.use(Vuex)
const store = new Vuex.Store({
state: { //当前的状态
count:0, //vuex的基本使用第一步：设置数量count.
username:'longfei' //4.19 Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
},
getters: { //store的计算属性
evenOrOdd(state){ //Vuex系列的辅助函数的运用——getter应用第1步:在store/index.js里面设置方法。
return state.count % 2 === 0 ? '偶数' : '奇数'
}
},
mutations: { //声明同步的方法，只能是同步方法。
increment(state){ //vuex的基本使用第七步：修改状态。
//修改状态
state.count++
},
decrement(state){
state.count--
},
// incrementAsync(state){ //为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
// setTimeout(()=>{
// state.count++;
// },1000);
// }
incrementAsync(state,amount){ //为什么要使用actions-同步化第1步：| //4.20 如何在组件内部提交数据给vuex第3步：在index.js里面设置状态。
state.count+=amount;
}
},
actions: { //声明异步的方法
// increment({commit}){ //vuex的基本使用第六步：声明Increment方法
// //commit mutations中声明的方法
// //修改状态的唯一方法是提交mutation
// commit('increment')
// },
// decrement({commit}){
// commit('decrement')
// }
incrementAsync({commit},{amount}){ //为什么要使用actions-同步化第2步：| //4.20 如何在组件内部提交数据给vuex第2步：在index.js里面设置方法。
setTimeout(()=>{
commit('incrementAsync',amount);
},1000);
}
},
modules: {
}
})
export default store;
//4.17 vuex的其本使用8步骤：
//vuex的基本使用第1步：在/store/index.js里面设置数量count.
//vuex的基本使用第2步：在About.vue里面设置计算属性的值。
//vuex的基本使用第3步：在About.vue里面设置显示count。
//vuex的基本使用第4步：在About.vue里面设置+1按钮
//vuex的基本使用第5步：在About.vue里面设置声明increment方法
//vuex的基本使用第6步：在/store/index.js里面设置Increment方法
//vuex的基本使用第7步：在/store/index.js里面设置修改状态。
//vuex的基本使用第8步：在App.vue上设置使用。
//4.18为什么要使用actions-差异化展示3步：
//为什么要使用actions-差异化展示第1步：在index.js里面添加方法，模拟异步
//为什么要使用actions-差异化展示第2步：在About.vue里面添加异步按钮
//为什么要使用actions-差异化展示第3步：在About.vue里面设置异步方法
//4.18为什么要使用actions-同步化展示2步：
//为什么要使用actions-同步化第1步：
//为什么要使用actions-同步化第2步：
//4.19 Vuex系列的辅助函数的运用——mapState应用4步骤：
//4.19 Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
//4.19 Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
//4.19 Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
//4.19 Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。
//4.19 Vuex系列的辅助函数的运用——getter应用3步骤：
//4.19 Vuex系列的辅助函数的运用——getter应用第1步:在store/index.js里面设置方法。
//4.19 Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
//4.19 Vuex系列的辅助函数的运用——getter应用第3步:在About.vue里面展示evenOrOdd。
//4.19 Vuex系列的辅助函数的运用——mapMutations和mapActions方法各一步。
//4.20 如何在组件内部提交数据给vuex共3步骤：
//4.20 如何在组件内部提交数据给vuex第1步：方法2等同于方法1在About.vue里面设置方法。
//4.20 如何在组件内部提交数据给vuex第2步：在store/index.js里面设置方法。
//4.20 如何在组件内部提交数据给vuex第3步：在store/index.js里面设置状态。运行结果：
附助函数仅限用于不提交数据的时候，如果需要提交数据，还是需要使用函数返回值的方法。
