store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import user from "@/store/modules/user.js"
import order from "@/store/modules/order.js"

const store = new Vuex.Store({
    modules: {
        user,
        order,
    }

})
export default store

user.js

export default {
    namespaced: true,
    state: {
        userMsg: 'user的信息',
        userList: [
            { "id": 1, "username": "Alice", age: 19 },
            { "id": 3, "username": "Amy", age: 30 },
            { "id": 7, "username": "Jack", age: 80 },
        ]
    },
    actions: {},
    mutations: {
        changeMsg(state, newMsg) {
            state.userMsg = newMsg
        }
    },
    getters: {
        getAge(state) {
            return state.userList.filter(item => item.age > 20)

        }

    }
}

order.js

export default {
    namespaced: true,
    state: {
        orderMsg: 'order的信息',
        orderList: []
    },
    actions: {
        order(ctx, type) {
            setTimeout(() => {
                let data = [{
                        "id": 1,
                        "proName": '小米'
                    },
                    {
                        "id": 2,
                        "proName": '紅米'
                    }
                ]
                ctx.commit("newOrder", data)
            }, 1000)
        }
    },
    mutations: {
        changeMsg(state, newMsg) {
            state.orderMsg = newMsg
        },
        newOrder(state, data) {
            state.orderList = data
        }
    }

}

index.vue

<template>
  <div class="index">
    <p>user模塊中的數(shù)據(jù)： {{ userMsg }}</p>
    <p><button @click="change">修改store中user模塊的數(shù)據(jù)</button></p>
    <ul>
      <li v-for="(item, index) in getAge" :key="index">{{item}}</li>
    </ul>
    <hr />
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  name: "index",
  computed: {
    ...mapState({
      userMsg: (state) => state.user.userMsg,
    }),
    ...mapGetters({ getAge: "user/getAge" }),
  },
  methods: {

    ...mapMutations(['user/changeMsg']),
    change() {
      this['user/changeMsg']("新用戶(hù)數(shù)據(jù)");
    },
    
  },
};
</script>

<style>
</style>

Category.vue

<template>
  <div class="category">
     <p>order模塊中的數(shù)據(jù)： {{ orderMsg }}</p>
    <p><button @click="change2">修改store中order模塊的數(shù)據(jù)</button></p>
   <ul>
      <li v-for="(item, index) in orderList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations, } from "vuex";
export default {
     name: "Category",
  created() {
      this.$store.dispatch("order/order",'phone')
  },
  computed: {
    ...mapState({
      orderMsg: (state) => state.order.orderMsg,
      orderList: (state) => state.order.orderList,
    }),

  },
  methods: {
    ...mapMutations(['order/changeMsg']),
     change2() {
      this['order/changeMsg']("新訂單數(shù)據(jù)");
    },
  },
};
</script>

<style>
</style>