uniapo使用vuex来缓存个人信息 在a页面显示并更更改 在b页面显示最新的案例

好的，我来给您提供一个简单的案例来演示如何使用Vuex来缓存个人信息，在A页面中显示并更改，在B页面中显示最新的信息。

首先，我们需要在Vuex store中定义一个state对象来保存个人信息，例如：

const state = {
  name: '',
  age: '',
  gender: ''
}

然后，我们定义一些mutation来更新这些信息，例如：

const mutations = {
  setName(state, name) {
    state.name = name
  },
  setAge(state, age) {
    state.age = age
  },
  setGender(state, gender) {
    state.gender = gender
  }
}

接下来，在A页面中，我们使用一个表单来输入个人信息，并调用这些mutation来更新Vuex store中的state，例如：

<template>
  <div>
    <input v-model="name" type="text" placeholder="姓名">
    <input v-model="age" type="number" placeholder="年龄">
    <input v-model="gender" type="text" placeholder="性别">
    <button @click="updateInfo">更新信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      gender: ''
    }
  },
  methods: {
    updateInfo() {
      this.$store.commit('setName', this.name)
      this.$store.commit('setAge', this.age)
      this.$store.commit('setGender', this.gender)
    }
  }
}
</script>

同时，在A页面中，我们使用computed属性来获取这些个人信息，例如：

computed: {
  name() {
    return this.$store.state.name
  },
  age() {
    return this.$store.state.age
  },
  gender() {
    return this.$store.state.gender
  }
}

最后，在B页面中，我们使用这些getter来获取最新的个人信息，例如：

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>性别：{{ gender }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    name() {
      return this.$store.getters.name
    },
    age() {
      return this.$store.getters.age
    },
    gender() {
      return this.$store.getters.gender
    }
  }
}
</script>

这样，我们就完成了使用Vuex来缓存个人信息，在A页面中显示并更改，在B页面中显示最新的信息的案例。