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

<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>

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

运行结果如下：

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