Vuex

困，疲惫，直接上代码吧。
其实，VUE直接去官网，里面啥都有。

1. phone模块

export default {
  //namespaced:true是设置私有命名空间，默认情况下该属性是false。
  //非私有命名空间的模块，只有state是私有的，getters、mutations、actions任然提升到全局中，
  //私有命名空间的模块，所有成员都是私有的（局部的）
  namespaced: true,
  state: {
    //手机数组
    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对象

//导入vue
import Vue from "vue";
//导入vuex插件
import Vuex from "vuex";
//使用vuex插件
Vue.use(Vuex);

//导入手机模块
import phone from './modules/phone.js'

//创建状态管理对象，并导出
export default new Vuex.Store({
  //定义状态
  state: {
    //姓
    firstName: "张",
    //名
    lastName: "三",
    //汽车数组
    cars: [
      {
        name: "奔驰",
        price: 50,
      },
      {
        name: "宝马",
        price: 40,
      },
      {
        name: "奥迪",
        price: 30,
      },
    ],
  },
  //定义计算属性
  getters: {
    //姓名--方法的参数是状态对象
    fullName(state) {
      //通过状态对象，可以获取到所有的状态信息
      return state.firstName + "." + state.lastName;
    },
    //汽车的总价
    totalCarPrice(state) {
      return state.cars.reduce((p, c) => p + c.price, 0);
    },
  },
  //定义操作状态的方法（这里的方法一般都是同步方法）
  mutations: {
    //修改姓--第一个参数是状态，第二个参数是新值
    updateFirstName(state, value) {
      state.firstName = value;
    },
    //修改名
    updateLastName(state, value) {
      state.lastName = value;
    },
    //添加汽车
    addCar(state, value) {
      state.cars.push(value);
    },
  },
  //定义操作状态的方法（这里的方法可以定义异步方法）
  actions: {
    // 修改名--第一个参数是上下文对象（就是当前store对象），第二个参数是新值
    updateLastName(store, value) {
      //注意：actions最好不要直接操作state，通过mutations操作state
      //所以，actions直接操作是mutations
      //为什么要这么设计，因为我们可能要跟value值发送请求，获取对应的值
      // 这里我们使用定时器，默认异步过程。
      setTimeout(() => {
        store.commit("updateLastName", value);
      }, 2000);
    },
    //添加汽车
    addCar(store, value) {
      store.commit("addCar", value);
    },
  },
  //模块
  modules: {
    //手机模块
    phone
  },
});

3. 注册给Vue

// 导入当前项目的路由器对象
import router from './router'
// 导入当前项目的全局状态管理对象
import store from './store'
new Vue({
  //使用路由
  router,
  //使用全局状态管理
  store,
  //渲染App组件
  render: h => h(App)
}).$mount('#app')

4. 使用

计算属性中转

computed:{
    //返回汽车数组
    cars(){
        return this.$store.state.cars
    },
    //返回汽车总价
    totalCarPrice(){
        return this.$store.getters.totalCarPrice
    },
    //返回手机数组信息
    phones() {
      // 注意：手机数组数据在phone模块中
      // $store.state返回的是全局状态，根据全局状态获取指定模块，再获取该模块中具体的状态。
      return this.$store.state.phone.phones;
    },
    //返回手机总价
    totalPhonePrice(){
        // 注意：总价在phone模块中
        // 获取模块中的计算机属性的方式是['模块名/计算属性名']
        return this.$store.getters['phone/totalPhonePrice']
    }
}

调用方法

methods: {
        //修改姓名
        updateFirstName(){
            this.$store.commit('updateFirstName','王')
        },
        //同步方法修改名
        syncUpdateLastName(){
            //commit()方法，调用的是mutations里面的方法
            this.$store.commit('updateLastName','明')
        },
        //异步方法修改名
        asyncUpdateLastName(){
            //dispatch()方法，调用的是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)
        }
}