一、私有模块

在store文件夹中新建moduleswen文件夹，在里面新建私有模块plane.js

默认情况下，actions、mutations、getters是注册在全局命名空间的。

通过namespaced属性，设置为true,将actions、mutations、getters全部注册到私有的模块中。

export default{
    //默认情况下，actions、mutations、getters是注册在全局命名空间的
    //通过namespaced属性，设置为true,将actions、mutations、getters全部注册到私有的模块中。
    namespaced:true,
    //状态
    state:{
        planeName:'民航222',
        planePrice:'200Y',
        planeAddress:'中国'
    },
    //计算属性
    getters:{
       planeInfo(state){
           return `飞机名称：${state.planeName}，飞机价格：${state.planePrice}，飞机产地：${state.planeAddress}`
       }
    },
    //同步方法
    mutations:{
        updatePlaneName(state,val){
            state.planeName=val
        },
        updatePlanePrice(state,val){
            state.planePrice=val
        }
    },
    //异步方法
    actions:{
        updatePlanePrice(store,val){
            setTimeout(() => {
                store.commit('updatePlanePrice',val)
            }, 1000);
        }
    }
}

在store文件夹里的index.js文件里面导入新建的私有模块plane。

import plane from './modules/plane.js'

 modules:{
    plane
  }

在views文件夹里新建Plane.vue组件，显示飞机的信息及修改的的方法。

注意：要从飞机模块中获取飞机的数据，方式是：state.模块名称.模块的数据

注意：要从私有的飞机模块中获取飞机的计算属性，方式是：['模块名/计算属性']

注意：调用的是私有的飞机模块里面的mutations定义的方法，方式是'模块名/方法名'

<template>
  <div class="plane">
      <h3>飞机信息</h3>
      <div>飞机名称：{{planeName}}</div>
      <div>飞机价格：{{planePrice}}</div>
      <div>飞机产地：{{planeAddress}}</div>
      <div>{{planeInfo}}</div>
      <hr>
      <button @click='updatePlaneName'>修改飞机名称</button>
      <button @click='updatePlanePrice'>修改飞机价格</button>
  </div>
</template>
<script>
export default {
  name: "Plane",
  computed:{
      //注意：要从飞机模块中获取飞机的数据
      //方式是：state.模块名称.模块的数据
      planeName(){
          return this.$store.state.plane.planeName
      },
      planePrice(){
          return this.$store.state.plane.planePrice
      },
      planeAddress(){
          return this.$store.state.plane.planeAddress
      },
      //计算属性
      planeInfo(){
          //注意：要从私有的飞机模块中获取飞机的计算属性
          //方式是：['模块名/计算属性']
          return this.$store.getters['plane/planeInfo']
      }
  },
  methods: {
      updatePlaneName(){
          //调用的是私有的飞机模块里面的mutations定义的方法
          //方式是'模块名/方法名'
         this.$store.commit('plane/updatePlaneName','空航777')
      },
      updatePlanePrice(){
          this.$store.dispatch('plane/updatePlanePrice','400Y')
      }
  },
};
</script>
<style scoped>
.plane{
    border: 1px solid #ccc;
    padding: 5px;
}
.plane button{
    margin: 0 10px;
}
</style>

在router文件夹里的index.js文件中定义plane路由对象信息

{
    path:'/plane',
    name:'Plane',
    component:()=>import('../views/Plane.vue')
  },

在全局App.vue里面写plane路由链接

 <router-link to="/plane">Plane</router-link> |

二、映射函数

在views文件夹里新建Map.vue文件，并导入映射函数。

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

注意：当组件中定义的计算属性和全局状态管理里面的数据名称相同时，可以使用映射函数，自动生成对应的计算属性。

注意：如果定义的方法名称和全局状态中定义的方法名称相同，并且方法通过参数传递具体的值，就可以使用映射函数生成方法。

注意：如果映射私有模块里面的数据或者方法，第一个参数就是模块的名称。

  <template>
  <div class="map">
    <h3>映射函数</h3>
    <div class="car">
      <h3>汽车信息</h3>
      <div>汽车名称：{{ carName }}</div>
      <div>汽车价格：{{ carPrice }}</div>
      <div>汽车产地：{{ carAddress }}</div>
      <div>{{ carInfo }}</div>
      <hr />
      <button @click="updateCarName('斯柯达')">修改汽车名称</button>
      <button @click="updateCarPrice('50W')">修改汽车价格</button>
      <button @click="updateCarAddress('data/address.json')">
        修改汽车产地
      </button>
    </div>
    <div class="plane">
      <h3>飞机信息</h3>
      <div>飞机名称：{{ planeName }}</div>
      <div>飞机价格：{{ planePrice }}</div>
      <div>飞机产地：{{ planeAddress }}</div>
      <div>{{ planeInfo }}</div>
      <hr />
      <button @click="updatePlaneName('空航555')">修改飞机名称</button>
      <button @click="updatePlanePrice('300Y')">修改飞机价格</button>
    </div>
  </div>
</template>
<script>
//导入映射函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Map",
  computed: {
    //当组件中定义的计算属性和全局状态管理里面的数据名称相同时，可以使用映射函数，自动生成对应的计算属性。
    //mapState映射state
    ...mapState(["carName", "carPrice", "carAddress"]),
    //mapGetters映射getters
    ...mapGetters(["carInfo"]),
    //映射私有模块里面的数据，第一个参数是模块名称
    ...mapState("plane", ["planeName", "planePrice", "planeAddress"]),
    ...mapGetters("plane", ["planeInfo"]),
  },
  methods: {
    //如果定义的方法名称和全局状态中定义的方法名称相同，并且方法通过参数传递具体的值，就可以使用映射函数生成方法。
    ...mapMutations(["updateCarName", "updateCarPrice"]),
    ...mapActions(["updateCarAddress"]),
    //映射私有模块里面的方法，第一个参数是模块名称
    ...mapMutations("plane", ["updatePlaneName"]),
    ...mapActions("plane", ["updatePlanePrice"]),
  },
};
</script>
<style scoped>
.map {
  border: 1px solid #ccc;
  padding: 5px;
}
.car {
  border: 1px solid red;
  padding: 5px;
  margin: 5px 0;
}
.car button {
  margin: 0 10px;
}
.plane {
  border: 1px solid green;
  padding: 5px;
  margin: 5px 0;
}
.plane button {
  margin: 0 10px;
}
</style>