组件之间的通讯方式

props 父给子 就不写了

全局组件通讯

• 监听全局的自定义事件.事件可以由 uni.$emit 触发.回调函数会接收所有传入事件触发函数的额外参数

uni.$on(eventName, callback);

• 实例

uni.$on("update", (data) => {
  console.log("监听事件来自update,携带参数msg为" + data);
});

Vuex

引入 VueX

引入 vuex，在项目根目录创建文件夹 store，并创建文件 index.js（uni-app 已经内置了 vuex，所以我们直接引入就可以了）

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    hasLogin: false, // 登录状态
    userInfo: {}, // 用户信息
  },
  mutations: {
    setHasLogin(state, value) {
      state.hasLogin = value;
      console.log(state.hasLogin);
    },
  },
  actions: {},
  getters: {},
});

main.js 引入

import App from "./App";
//引入vuex
import store from "./store/store.js";
// #ifndef VUE3
import Vue from "vue";
Vue.prototype.$store = store;
Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
  ...App,
  store,
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
  };
}
// #endif

组件里面使用

<template>
  <view>
    <view class="box">
      <view class="content"> 内容测试 </view>
      <button @click="changeflag">{{hasLogin}}</button>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from "vuex";
  export default {
    data() {
      return {};
    },
    computed: {
      ...mapState(["hasLogin"]),
    },
    methods: {
      ...mapMutations(["setHasLogin"]),
      changeflag() {
        this.setHasLogin(true);
      },
    },
  };
</script>

<style lang="scss">
  .box {
    .content {
      color: red;
      font-size: 48rpx;
    }
  }
</style>

Vue3 里面使用 VueX 建议使用 Pinia