vue3使用pinia实现全局变量共享,主动监听变化

首先创建一个js文件

// stationsStore.js
import { defineStore } from 'pinia';

export const useStationsStore = defineStore('stations', {
    state: () => ({
        stationId: '',
    }),
    actions: {
        setStationId(newStationId) {
            this.stationId = newStationId;
        },
    },
});

然后在要赋值的页面引入

//one.vue

import {useStationsStore} from "@/store/stationsStore";

const stationsStore = useStationsStore();

//在方法中赋值
function handleNodeClick() {
  stationsStore.setStationId(”11111“);
};

然后在另一个页面主动监听值的变化

//two.vue
import {watch} from "vue";
import {useStationsStore} from "@/store/stationsStore";

const stationsStore = useStationsStore();

watch(() => stationsStore.stationId, (newValue, oldValue) => {
  console.log('stationId 变化了:', oldValue, '->', newValue);
  // 执行其他逻辑...
});

你可能感兴趣的:(javascript,前端,vue.js)