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

假设你要缓存的个人信息是用户的姓名和年龄，可以按照以下步骤来实现：

1. 安装vuex：在uniapp项目根目录下运行以下命令：

   npm install vuex --save

2. 创建vuex store：在`src`目录下创建一个名为`store`的目录，在该目录下创建一个`index.js`文件，文件内容如下：

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
     state: {
       name: '',
       age: 0
     },
     mutations: {
       SET_NAME(state, name) {
         state.name = name
       },
       SET_AGE(state, age) {
         state.age = age
       }
     },
     actions: {
       setName({ commit }, name) {
         commit('SET_NAME', name)
       },
       setAge({ commit }, age) {
         commit('SET_AGE', age)
       }
     }
   })
   
   export default store

在这个store中，我们定义了两个状态`name`和`age`，并且定义了两个mutation用于修改这两个状态。

3. 在a页面中使用vuex：在a页面的`<script>`标签中，可以通过以下代码来读取和修改vuex store中的状态：

   import { mapState, mapMutations } from 'vuex'
   export default {
     computed: {
       ...mapState({
         name: state => state.name,
         age: state => state.age
       })
     },
     methods: {
       ...mapMutations([
         'SET_NAME',
         'SET_AGE'
       ]),
       updateInfo() {
         this.SET_NAME('Tom')
         this.SET_AGE(18)
       }
     }
   }

在这个例子中，我们使用了`mapState`函数来将vuex store中的`name`和`age`状态映射到组件的计算属性中。同时，我们还使用了`mapMutations`函数来将`SET_NAME`和`SET_AGE`两个mutation映射到组件的方法中。在`updateInfo`方法中，我们调用了两个mutation来修改vuex store中的状态。

4. 在b页面中使用vuex：在b页面的`<script>`标签中，可以通过以下代码来读取vuex store中的状态：

   import { mapState } from 'vuex'
   export default {
     computed: {
       ...mapState({
         name: state => state.name,
         age: state => state.age
       })
     }
   }

在这个例子中，我们同样使用了`mapState`函数来将vuex store中的`name`和`age`状态映射到组件的计算属性中。此时，我们读取到的状态是最新的状态。

到此为止，我们已经完成了使用vuex来缓存个人信息，并在a页面和b页面中显示和修改的操作。