困，疲憊，直接上代碼吧。
其實，VUE直接去官網(wǎng)，里面啥都有。

1. phone模塊

export default {
  //namespaced:true是設(shè)置私有命名空間，默認(rèn)情況下該屬性是false。
  //非私有命名空間的模塊，只有state是私有的，getters、mutations、actions任然提升到全局中，
  //私有命名空間的模塊，所有成員都是私有的（局部的）
  namespaced: true,
  state: {
    //手機數(shù)組
    phones: [
      {
        name: "iphone13",
        price: 6999,
      },
      {
        name: "華為",
        price: 5999,
      },
      {
        name: "小米",
        price: 4999,
      },
    ],
  },
  getters: {
    // 計算手機總價
    totalPhonePrice(state) {
      return state.phones.reduce((p, c) => p + c.price, 0);
    },
  },
  mutations: {
    addPhone(state, value) {
      state.phones.push(value);
    },
  },
  actions: {
    addPhone(store, value) {
      setTimeout(() => {
        store.commit("addPhone", value);
      }, 2000);
    },
  }
};

2. store對象

//導(dǎo)入vue
import Vue from "vue";
//導(dǎo)入vuex插件
import Vuex from "vuex";
//使用vuex插件
Vue.use(Vuex);

//導(dǎo)入手機模塊
import phone from './modules/phone.js'

//創(chuàng)建狀態(tài)管理對象，并導(dǎo)出
export default new Vuex.Store({
  //定義狀態(tài)
  state: {
    //姓
    firstName: "張",
    //名
    lastName: "三",
    //汽車數(shù)組
    cars: [
      {
        name: "奔馳",
        price: 50,
      },
      {
        name: "寶馬",
        price: 40,
      },
      {
        name: "奧迪",
        price: 30,
      },
    ],
  },
  //定義計算屬性
  getters: {
    //姓名--方法的參數(shù)是狀態(tài)對象
    fullName(state) {
      //通過狀態(tài)對象，可以獲取到所有的狀態(tài)信息
      return state.firstName + "." + state.lastName;
    },
    //汽車的總價
    totalCarPrice(state) {
      return state.cars.reduce((p, c) => p + c.price, 0);
    },
  },
  //定義操作狀態(tài)的方法（這里的方法一般都是同步方法）
  mutations: {
    //修改姓--第一個參數(shù)是狀態(tài)，第二個參數(shù)是新值
    updateFirstName(state, value) {
      state.firstName = value;
    },
    //修改名
    updateLastName(state, value) {
      state.lastName = value;
    },
    //添加汽車
    addCar(state, value) {
      state.cars.push(value);
    },
  },
  //定義操作狀態(tài)的方法（這里的方法可以定義異步方法）
  actions: {
    // 修改名--第一個參數(shù)是上下文對象（就是當(dāng)前store對象），第二個參數(shù)是新值
    updateLastName(store, value) {
      //注意：actions最好不要直接操作state，通過mutations操作state
      //所以，actions直接操作是mutations
      //為什么要這么設(shè)計，因為我們可能要跟value值發(fā)送請求，獲取對應(yīng)的值
      // 這里我們使用定時器，默認(rèn)異步過程。
      setTimeout(() => {
        store.commit("updateLastName", value);
      }, 2000);
    },
    //添加汽車
    addCar(store, value) {
      store.commit("addCar", value);
    },
  },
  //模塊
  modules: {
    //手機模塊
    phone
  },
});

3. 注冊給Vue

// 導(dǎo)入當(dāng)前項目的路由器對象
import router from './router'
// 導(dǎo)入當(dāng)前項目的全局狀態(tài)管理對象
import store from './store'
new Vue({
  //使用路由
  router,
  //使用全局狀態(tài)管理
  store,
  //渲染App組件
  render: h => h(App)
}).$mount('#app')

4. 使用

計算屬性中轉(zhuǎn)

computed:{
    //返回汽車數(shù)組
    cars(){
        return this.$store.state.cars
    },
    //返回汽車總價
    totalCarPrice(){
        return this.$store.getters.totalCarPrice
    },
    //返回手機數(shù)組信息
    phones() {
      // 注意：手機數(shù)組數(shù)據(jù)在phone模塊中
      // $store.state返回的是全局狀態(tài)，根據(jù)全局狀態(tài)獲取指定模塊，再獲取該模塊中具體的狀態(tài)。
      return this.$store.state.phone.phones;
    },
    //返回手機總價
    totalPhonePrice(){
        // 注意：總價在phone模塊中
        // 獲取模塊中的計算機屬性的方式是['模塊名/計算屬性名']
        return this.$store.getters['phone/totalPhonePrice']
    }
}

調(diào)用方法

methods: {
        //修改姓名
        updateFirstName(){
            this.$store.commit('updateFirstName','王')
        },
        //同步方法修改名
        syncUpdateLastName(){
            //commit()方法，調(diào)用的是mutations里面的方法
            this.$store.commit('updateLastName','明')
        },
        //異步方法修改名
        asyncUpdateLastName(){
            //dispatch()方法，調(diào)用的是actions里面的方法
            this.$store.dispatch('updateLastName','天')
        },
        //添加汽車
        addCar(){
            this.$store.dispatch('addCar',this.car)
        },
        //同步方法添加手機
        syncAddPhone(){
            // 注意：addPhone方法在phone模塊中
            this.$store.commit('phone/addPhone',this.phone)
        },
        //異步方法添加手機
        asyncAddPhone(){
            // 注意：addPhone方法在phone模塊中
            this.$store.dispatch('phone/addPhone',this.phone)
        }
}