本文要结合下面几篇文章才能串起来:
第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章 Vue全家桶(vue-router+vuex) - 4.20 如何在组件内部提交数据给vuex共3步骤
此文所涉及到的代码已展示在下面。
首先查看项目目录:
使用vuex的模块化构建购物车17步骤:
目录
使用vuex的模块化构建购物车17步骤:
使用vuex的模块化构建购物车第1步:在store文件夹下面新两两个模块cart.js和products.js
使用vuex的模块化构建购物车第2步:在cart.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
使用vuex的模块化构建购物车第3步:在products.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
使用vuex的模块化构建购物车第4步:在cart.js里面添加cartList和count.
使用vuex的模块化构建购物车第5步:在products.js里面添加products.
使用vuex的模块化构建购物车第6步:在store/index.js里面导入cart.js和products.js两个模块.
使用vuex的模块化构建购物车第7步:在store/index.js里面挂载cart.js和products.js两个模块.
使用vuex的模块化构建购物车第8步:在cart.js里面添加namespaced属性.
使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
使用vuex的模块化构建购物车第10步:在cart.js里面添加getters属性.
使用vuex的模块化构建购物车第11步:在App.vue里面导入mapGetters
使用vuex的模块化构建购物车第12步:在App.vue里面设置mapGetters方法.
使用vuex的模块化构建购物车第13步:在App.vue里面展示getCount.
使用vuex的模块化构建购物车第14步:components文件夹下面新建组件ProductList.vue和ShoppingCart.vue
使用vuex的模块化构建购物车第15步:在About.vue里面导入组件ProductList.vue和ShoppingCart.vue
使用vuex的模块化构建购物车第16步:在About.vue里面挂载组件ProductList.vue和ShoppingCart.vue
使用vuex的模块化构建购物车第17步:在About.vue里面展示ProductList.vue和ShoppingCart.vue
第1步:在store/modules文件夹下面新两两个模块cart.js和products.js
cart.js代码如下:
// cart.js内容
export default {
namespaced:true, //4.21 使用vuex的模块化构建购物车第8步:在cart.js里面添加namespaced属性.
state:{
cartList: [], //4.21 使用vuex的模块化构建购物车第4步:在cart.js里面添加carList和count.
count:0
},
getters:{
getCount(state){ //4.21 使用vuex的模块化构建购物车第10步:在cart.js里面添加getters属性.
return state.count
}
},
mutations:{
},
actions:{
}
}
products.js代码:
// products.js内容
export default {
namespaced:true, //4.21 使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
state:{
products: [] //4.21 使用vuex的模块化构建购物车第5步:在products.js里面添加products.
},
getters:{
},
mutations:{
},
actions:{
}
}
第2步:在cart.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
请查看cart.js代码。
第3步:在products.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
请查看products.js代码。
第4步:在cart.js里面添加cartList和count.
请查看cart.js代码。
第5步:在products.js里面添加products.
请查看products.js代码。
第6步:在store/index.js里面导入cart.js和products.js两个模块.
第7步:在store/index.js里面挂载cart.js和products.js两个模块.
index.js代码:
// store/index.js内容
import Vue from 'vue'
//1.导入模块
import Vuex from 'vuex'
//2.使用当前的插件
Vue.use(Vuex)
import cart from './modules/cart'; //4.21 使用vuex的模块化构建购物车第6步:在store/index.js里面导入cart.js和products.js两个模块.
import products from './modules/products';
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: {
cart, //4.21 使用vuex的模块化构建购物车第7步:在store/index.js里面挂载cart.js和products.js两个模块.
products
}
})
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里面设置状态。
//4.21 使用vuex的模块化构建购物车步骤:
//4.21 使用vuex的模块化构建购物车第1步:在store文件夹下面新两两个模块cart.js和products.js
//4.21 使用vuex的模块化构建购物车第2步:在cart.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
//4.21 使用vuex的模块化构建购物车第3步:在products.js里面添加export default对象,并且设置state,getters,mutations,actions属性.
//4.21 使用vuex的模块化构建购物车第4步:在cart.js里面添加carList和count.
//4.21 使用vuex的模块化构建购物车第5步:在products.js里面添加products.
//4.21 使用vuex的模块化构建购物车第6步:在store/index.js里面导入cart.js和products.js两个模块.
//4.21 使用vuex的模块化构建购物车第7步:在store/index.js里面挂载cart.js和products.js两个模块.
//4.21 使用vuex的模块化构建购物车第8步:在cart.js里面添加namespaced属性.
//4.21 使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
//4.21 使用vuex的模块化构建购物车第10步:在cart.js里面添加getters属性.
//4.21 使用vuex的模块化构建购物车第11步:在App.vue里面导入mapGetters
//4.21 使用vuex的模块化构建购物车第12步:在App.vue里面设置mapGetters方法.
//4.21 使用vuex的模块化构建购物车第13步:在App.vue里面展示getCount.
//4.21 使用vuex的模块化构建购物车第14步:components文件夹下面新建组件ProductList.vue和ShoppingCart.vue
//4.21 使用vuex的模块化构建购物车第15步:在About.vue里面导入组件ProductList.vue和ShoppingCart.vue
//4.21 使用vuex的模块化构建购物车第16步:在About.vue里面挂载组件ProductList.vue和ShoppingCart.vue
//4.21 使用vuex的模块化构建购物车第17步:在About.vue里面展示ProductList.vue和ShoppingCart.vue
第8步:在cart.js里面添加namespaced属性.
请查看cart.js代码。
第9步:在products.js里面添加namespaced属性.
请查看products.js代码。
第10步:在cart.js里面添加getters属性.
请查看cart.js代码。
第11步:在App.vue里面导入mapGetters
第12步:在App.vue里面设置mapGetters方法.
第13步:在App.vue里面展示getCount.
App.vue代码:
// App.vue内容。
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
{{$store.state.count}} <!-- //vuex的基本使用第八步:在App.vue上使用。 -->
{{getCount}} <!-- //4.21 使用vuex的模块化构建购物车第13步:在App.vue里面展示getCount. -->
</nav>
<router-view/>
</div>
</template>
<script>
import { mapGetters } from 'vuex'; //4.21 使用vuex的模块化构建购物车第11步:在App.vue里面导入mapGetters
export default {
computed: {
...mapGetters('cart',['getCount']) //4.21 使用vuex的模块化构建购物车第12步:在App.vue里面设置mapGetters方法.
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
第14步:components文件夹下面新建组件ProductList.vue和ShoppingCart.vue
请查看目录。
ProductList.vue代码:
// ProductList.vue内容
<template>
<div>
<h2>我的商铺</h2>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
ShoppingCart.vue代码:
// ShoppingCart.vue内容
<template>
<div>
<h2>我的购物车</h2>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
第15步:在About.vue里面导入组件ProductList.vue和ShoppingCart.vue
第16步:在About.vue里面挂载组件ProductList.vue和ShoppingCart.vue
第17步:在About.vue里面展示ProductList.vue和ShoppingCart.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里面添加异步按钮 -->
<ProductList></ProductList> <!-- //4.21 使用vuex的模块化构建购物车第17步:在About.vue里面展示ProductList.vue和ShoppingCart.vue -->
<hr>
<ShoppingCart></ShoppingCart>
</div>
</template>
<script>
//附助函数仅限用于不提交数据的时候,如果需要提交数据,还是需要使用函数返回值的方法。
import { mapState,mapGetters,mapMutations,mapActions } from "vuex"; //4.19 Vuex系列的辅助函数的运用——mapState应用第2步:导入方法。
import ProductList from '@/components/ProductList' //4.21 使用vuex的模块化构建购物车第15步:在About.vue里面导入组件ProductList.vue和ShoppingCart.vue
import ShoppingCart from '@/components/ShoppingCart'
export default{
components: { //4.21 使用vuex的模块化构建购物车第16步:在About.vue里面挂载组件ProductList.vue和ShoppingCart.vue
ProductList,
ShoppingCart
},
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>
操作步骤有点多,但是记录的比较详细,每一步的操作步骤,在相应的代码后面都有备注。
运行结果如下:
下一章将继续介绍相关的知识。