Vue2实现组件通讯的常用方式

// 父组件 App.vue
<template>
  <div>
    <!-- 传递属性 money 和 方法 getSonMsg -->
    <Girl :money="money" :getSonMsg="getSonMsg"/>
  </div>
</template>
<script>
import Girl from '@/components/Girl';
export default {
  components: { Girl },
  data() {
    return { money: { num: 1000 } }
  },
  methods: {
    getSonMsg(msg) {
      console.log('接收到了girl组件传递的数据', msg); // 父组件在这里接收到了子组件的数据
    }
  }
}
</script>
// 子组件 Girl.vue
<script>
export default {
  // 推荐使用对象方式接收，可限制类型、必要性及默认值
  props: {
    money: { type: Object, required: true },
    getSonMsg: { type: Function }
  },
  data() { return { girlInfo: '我是girl组件' } },
  methods: {
    sendInfo() {
      // 触发父组件传来的方法，并传入子组件的数据实现子传父
      this.getSonMsg(this.girlInfo);
    }
  }
}
</script>

// 父组件
<HelloWorld @event2="handleEvent"></HelloWorld>

// 子组件 HelloWorld.vue
methods: {
  doSome() {
    // 触发 event2 事件，并可以传递多个参数
    this.$emit('event2', this.msg, 666, 8888); 
  }
}

// 父组件
<template>
  <HelloWorld ref="hello" />
</template>
<script>
export default {
  mounted() {
    // 使用箭头函数，确保 this 指向父组件实例
    this.$refs.hello.$on('event2', (msg) => {
      console.log('收到数据', msg, this); 
    });
  }
}
</script>

// 在 main.js 中
// 1. 获取 VueComponent 构造函数
const VueComponentConstructor = Vue.extend({});
// 2. 实例化一个 vc 对象
const globelvc = new VueComponentConstructor();
// 3. 将其挂载到 Vue 原型上
Vue.prototype.$bus = globelvc; 

// 在 main.js 中
new Vue({
  render: (h) => h(App),
  beforeCreate() {
    // 安装全局事件总线，$bus 就是当前应用的 vm
    Vue.prototype.$bus = this; 
  }
}).$mount("#app");

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios"; // 引入网络请求库

Vue.use(Vuex);

// 1. State：定义全局共享的数据
const state = {
  username: "zhangsan", // 基础字符串状态
  studentName: [
    { id: "001", name: "孙悟空" },
    { id: "002", name: "猪八戒" }
  ],
  userList: [] // 准备存放异步请求来的列表数据
};

// 2. Getters：基于 State 加工的计算属性
const getters = {
  // 每一个 getter 方法会自动接收 state 作为第一个参数
  // 需求：将 username 反转展示
  reverseName(state) {
    return state.username.split("").reverse().join("");
  }
};

// 3. Mutations：负责同步更新 State 的方法
const mutations = {
  // 接收 state 作为第一个参数，value（提交的载荷）作为第二个参数
  SAVE_STUDENT(state, value) {
    // 只能在此进行同步操作直接修改 state
    state.studentName.unshift({ id: Date.now(), name: value });
  },
  
  // 用于接收异步操作拿回来的数据并赋值给 state
  GET_USER_INFO(state, value) {
    state.userList = value;
  }
};

// 4. Actions：处理异步操作和复杂逻辑
const actions = {
  // context 相当于一个迷你的 store 对象，包含 commit、dispatch 等方法
  
  // 示例 A：简单的封装，将外部传来的值交给 Mutation
  saveStudent(context, value) {
    // 可以在这里做一些逻辑判断，判断通过后再提交
    context.commit("SAVE_STUDENT", value);
  },

  // 示例 B：真实的异步 Ajax 请求
  async getUserInfo(context) {
    try {
      // 模拟发送异步网络请求获取数据
      let res = await axios.get("api/user"); 
      // 拿到数据后，提交给 Mutations 去更新 State
      context.commit("GET_USER_INFO", res.data); 
    } catch (error) {
      console.log(error.message);
    }
  }
};

// 创建并暴露 store 对象
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
});

// store/student.js (学生模块)
export default {
  namespaced: true, // 开启命名空间
  state: { studentNum: 5, studentName: "张三" },
  getters: {
    reverseStudentName(state) { return state.studentName.split("").reverse().join(""); }
  },
  mutations: {
    STU_NUM_FUN(state, value) { state.studentNum += value; }
  },
  actions: {
    stuNumFun(context, value) { context.commit("STU_NUM_FUN", value); }
  }
};

// store/index.js (主文件)
import Vue from "vue";
import Vuex from "vuex";
import student from "./student";
Vue.use(Vuex);
export default new Vuex.Store({
  modules: { student } // 注册模块
});

// 组件内
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    // 数组形式或对象形式映射模块内的 state 和 getters
    ...mapState('student', ['studentNum', 'studentName']),
    ...mapGetters('student', ['reverseStudentName'])
  },
  methods: {
    // 映射 actions，模板中调用时直接传参 @click="stuNumFun(2)"
    ...mapActions('student', ['stuNumFun'])
  }
}

// test.js 模块
import axios from "axios";
export default {
  namespaced: true,
  state: { list: [] },
  mutations: { GET_USER_INFO(state, value) { state.list = value; } },
  actions: {
    async getUserInfo(context) {
      try {
        let res = await axios.get("api/user");
        context.commit("GET_USER_INFO", res.data); // 请求成功后提交 mutation
      } catch (error) { console.log(error.message); }
    }
  }
}

// 安装: npm install vuex-persistedstate
// store/index.js
import createPersistedState from 'vuex-persistedstate'

export const store = new Vuex.Store({
  modules: { student },
  plugins: [
    createPersistedState({
      // 可选配置：指定需要持久化的模块数据
      reducer(val) {
        return { student: val.student } 
      }
    })
  ]
})