第4章 Vue全家桶(vue-router+vuex) - 4.21 使用vuex的模块化构建购物车步骤

本文要结合下面几篇文章才能串起来：

第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内容。

第14步:components文件夹下面新建组件ProductList.vue和ShoppingCart.vue

请查看目录。

ProductList.vue代码：

// ProductList.vue内容

ShoppingCart.vue代码：

// ShoppingCart.vue内容

第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内容

操作步骤有点多，但是记录的比较详细，每一步的操作步骤，在相应的代码后面都有备注。

运行结果如下：

下一章将继续介绍相关的知识。