实现vue监听全局变量
场景:在一个全局函数中需要根据不同的条件改变一个全局变量的值,并在另一个页面中展示这个全局变量。在监听一个事件时调用该全局函数,全局变量的值会随之更新,但是在另一个页面中始终显示的是全局变量的初始值。如何使全局变量进行刷新。
网上也没有找到可行的办法,要么说的很简洁,要么不可行。所以自己也试了很多方式,终于用vuex的Mutation实现了全局变量刷新。mutation用于修改state中定义的状态变量,可以同步更改state 的状态。
vuex中将scale初始值设置为"1:100W"。mutations中的setScale方法用于在全局函数中改变scale的值。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
scale: "1:100W"
}
const mutations = {
setScale(state, scale) {
state.scale = scale;
}
}
export default new Vuex.Store({
state,
mutations
});
在全局函数中根据不同条件要改变scale的值
import store from '../store'
if (zoom <= 5 && sheetType != 1000000) {
sheetType = 1000000;
addSheetNumber(1000000);
store.commit('setScale', "1:100W");
} else if (zoom <= 7 &&a