微信 web-view中 vue3设置localstorage

在微信 Webview 中使用 Vue3 设置 localStorage，首先你需要确保在 Vue 组件中能够访问到本地存储。由于微信 Webview 的安全限制，直接操作全局的 `window.localStorage` 可能会受限。你可以通过以下步骤在 Vue 组件中操作：

1. 使用自定义的 vuex 或者 Vuex-persistedstate 这样的库来管理 localStorage，因为它们可以在组件之间共享并处理同步问题。

// 如果使用vuex
import { createStore } from 'vuex'
import { persistState } from 'vuex-persistedstate'

const store = createStore({
  state: {
    localStorageData: {}
  },
  mutations: {
    setLocalStorage (state, key, value) {
      state.localStorageData[key] = value;
      // 如果你想保存到持久化存储，可以在这里使用 persistState
      if (process.env.NODE_ENV === 'production') {
        persistState(['localStorageData'], store)
      }
    },
    getLocalStorage (state, key) {
      return state.localStorageData[key];
    }
  },
  actions: {
    saveData ({ commit }, { key, value }) {
      commit('setLocalStorage', key, value);
    },
    readData ({ commit }, key) {
      commit('getLocalStorage', key);
    }
  }
})

export default store

2. 在组件中，通过注入 store 来访问 localStorage 数据：

<template>
  <div>
    <button @click="saveData">Save Data</button>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script setup>
import { useStore } from '@store/store.js';

const store = useStore()
let data

function saveData () {
  const newValue = 'new value';
  store.commit('saveData', { key: 'exampleKey', value: newValue });
}

function getDataFromLocalStorage() {
  data = store.getters.localStorageData.exampleKey;
}
</script>

当需要读取或写入数据时，调用相应的方法即可。注意，生产环境使用 `persistState` 只是为了在刷新页面时恢复数据，实际使用时请检查微信 Webview 的文档以确认是否允许这种方式访问 localStorage。