uni-app 开启固定出口IP开关在页面刷新后又重置为关闭状态

在 uni-app 中，如果你发现某个设置（如“固定出口IP开关”）在页面刷新后被重置为关闭状态，通常是因为这些设置没有被持久化保存。每次页面刷新时，应用会重新初始化，导致状态丢失。

要解决这个问题，你可以通过以下几种方式来确保状态在页面刷新后仍然保持：

1. 使用 localStorage 或 sessionStorage

你可以将开关状态存储在 localStorage 或 sessionStorage 中，这样即使在页面刷新后，状态仍然可以被读取和恢复。

示例代码：

// 保存开关状态
function saveSwitchState(state) {
  localStorage.setItem('fixedIpSwitchState', state ? 'on' : 'off');
}

// 读取开关状态
function loadSwitchState() {
  const state = localStorage.getItem('fixedIpSwitchState');
  return state === 'on';
}

// 在页面加载时恢复状态
onLoad(() => {
  const switchState = loadSwitchState();
  // 根据 switchState 设置开关状态
});

2. 使用 Vuex 状态管理

如果你在项目中使用了 Vuex，可以将开关状态存储在 Vuex 的 store 中，并结合 localStorage 或 sessionStorage 来持久化保存状态。

示例代码：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    fixedIpSwitchState: localStorage.getItem('fixedIpSwitchState') === 'on',
  },
  mutations: {
    setFixedIpSwitchState(state, value) {
      state.fixedIpSwitchState = value;
      localStorage.setItem('fixedIpSwitchState', value ? 'on' : 'off');
    },
  },
});

export default store;

// 在组件中使用
methods: {
  toggleSwitch() {
    const newState = !this.$store.state.fixedIpSwitchState;
    this.$store.commit('setFixedIpSwitchState', newState);
  },
},

3. 使用 uni-app 的 uni.setStorageSync 和 uni.getStorageSync

uni-app 提供了 uni.setStorageSync 和 uni.getStorageSync 方法，用于同步存储和读取数据。

示例代码：

// 保存开关状态
function saveSwitchState(state) {
  uni.setStorageSync('fixedIpSwitchState', state ? 'on' : 'off');
}

// 读取开关状态
function loadSwitchState() {
  const state = uni.getStorageSync('fixedIpSwitchState');
  return state === 'on';
}

// 在页面加载时恢复状态
onLoad(() => {
  const switchState = loadSwitchState();
  // 根据 switchState 设置开关状态
});

4. 使用 uni.setStorage 和 uni.getStorage

如果你希望使用异步方式存储和读取数据，可以使用 uni.setStorage 和 uni.getStorage。

示例代码：

// 保存开关状态
function saveSwitchState(state) {
  uni.setStorage({
    key: 'fixedIpSwitchState',
    data: state ? 'on' : 'off',
  });
}

// 读取开关状态
function loadSwitchState(callback) {
  uni.getStorage({
    key: 'fixedIpSwitchState',
    success(res) {
      callback(res.data === 'on');
    },
  });
}

// 在页面加载时恢复状态
onLoad(() => {
  loadSwitchState((switchState) => {
    // 根据 switchState 设置开关状态
  });
});